From 749f897a11e711199c6b1677accf2f6e46895315 Mon Sep 17 00:00:00 2001
From: fei <791364011@qq.com>
Date: 星期六, 22 十一月 2025 16:01:26 +0800
Subject: [PATCH] 新增了代码

---
 src/views/archiveManager/archiveMaterial/index.vue |  417 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 393 insertions(+), 24 deletions(-)

diff --git a/src/views/archiveManager/archiveMaterial/index.vue b/src/views/archiveManager/archiveMaterial/index.vue
index 7551f1d..90f6360 100644
--- a/src/views/archiveManager/archiveMaterial/index.vue
+++ b/src/views/archiveManager/archiveMaterial/index.vue
@@ -14,7 +14,29 @@
     <el-row>
     <el-col :span="16">
           <el-form-item label="璐ｄ换鑰�" prop="creator">
-            <el-input v-model="form.creator" placeholder="璇疯緭鍏ヨ矗浠昏��" />
+            <div class="title-search-wrapper">
+              <el-input
+                v-model="form.creator"
+                placeholder="璇疯緭鍏ヨ矗浠昏��"
+                @input="handleCreatorInput"
+                @focus="showCreatorSuggestions = true"
+                @blur="handleCreatorBlur"
+              />
+              <!-- 涓嬫媺寤鸿妗� -->
+              <div
+                v-if="showCreatorSuggestions && creatorSuggestions.length > 0"
+                class="title-suggestions"
+              >
+                <div
+                  v-for="(item, index) in creatorSuggestions"
+                  :key="index"
+                  class="suggestion-item"
+                  @mousedown="selectCreatorSuggestion(item)"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
           </el-form-item>
           </el-col>
   </el-row>
@@ -22,7 +44,29 @@
 
   <el-col :span="16">
           <el-form-item label="鏂囦欢棰樺悕" prop="title">
-            <el-input v-model="form.title" placeholder="璇疯緭鍏ユ枃浠堕鍚�" />
+            <div class="title-search-wrapper">
+              <el-input
+                v-model="form.title"
+                placeholder="璇疯緭鍏ユ枃浠堕鍚�"
+                @input="handleTitleInput"
+                @focus="showTitleSuggestions = true"
+                @blur="handleTitleBlur"
+              />
+              <!-- 涓嬫媺寤鸿妗� -->
+              <div
+                v-if="showTitleSuggestions && titleSuggestions.length > 0"
+                class="title-suggestions"
+              >
+                <div
+                  v-for="(item, index) in titleSuggestions"
+                  :key="index"
+                  class="suggestion-item"
+                  @mousedown="selectTitleSuggestion(item)"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </div>
           </el-form-item>
     </el-col>
     </el-row>
@@ -197,7 +241,7 @@
 
 
 
-      <el-row :gutter="12" class="mb8">
+      <el-row :gutter="12" class="mb8 fixed-row">
         <el-col :span="1.5">
           <el-button
             type="primary"
@@ -226,6 +270,7 @@
             icon="el-icon-download"
             size="mini"
             @click="handleExport"
+            v-hasPermi="['system:materials:list']"
 
           >瀵煎嚭</el-button>
         </el-col>
@@ -379,6 +424,9 @@
         :limit.sync="queryParams.pageSize"
         @pagination="getList"
       />
+
+
+
       <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
 
         <el-form ref="forms" :model="forms" :rules="rules" label-width="100px">
@@ -410,11 +458,11 @@
                  <!-- <el-form-item label="椤垫" prop="pageOrder">
                    <el-input v-model="forms.pageOrder" placeholder="璇疯緭鍏ラ〉娆�" />
                  </el-form-item> -->
-    <el-form-item label="鏂囧瓧鏉愭枡" prop="fileStyle">
+    <el-form-item label="鏉愭枡绫诲瀷" prop="fileStyle">
           <el-select
             v-model="forms.fileStyle"
 
-            placeholder="璇烽�夋嫨鏂囧瓧鏉愭枡"
+            placeholder="璇烽�夋嫨鏉愭枡绫诲瀷"
             clearable
           >
             <el-option
@@ -425,7 +473,19 @@
             />
           </el-select>
         </el-form-item>
-
+     <el-form-item label="椤靛彿" prop="pageNumber">
+        <el-col :span="8">
+          <el-input
+            v-model.number="forms.pageNumber"
+            placeholder="璇疯緭鍏ラ〉鍙凤紙鏁板瓧绫诲瀷锛�"
+            clearable
+            type="number"
+            min="1"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-col>
+      </el-form-item>
        <el-form-item label="澶囨敞" prop="remarks">
               <el-input v-model="forms.remarks" placeholder="璇疯緭鍏ュ娉�" />
             </el-form-item>
@@ -571,7 +631,15 @@
           placeholder="璇烽�夋嫨鏃ユ湡">
         </el-date-picker> -->
       </el-form-item>
-      <el-form-item label="椤靛彿" prop="pageNumber">
+      <el-form-item label="妗ｆ鍙�" prop="fileNumber">
+        <el-input
+          v-model="queryParams.fileNumber"
+          placeholder="璇疯緭鍏ユ。妗堝彿锛堟敮鎸佽寖鍥存悳绱紝濡傦細B1.3-05-2024-0001~0003锛�"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+    <!--  <el-form-item label="椤靛彿" prop="pageNumber">
         <el-col :span="8">
           <el-input
             v-model.number="queryParams.pageNumber"
@@ -591,7 +659,7 @@
           clearable
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
+      </el-form-item> -->
      <el-form-item label="鏂囧瓧鏉愭枡" prop="fileStyle">
           <el-select
             v-model="queryParams.fileStyle"
@@ -725,7 +793,7 @@
   </template>
 
   <script>
-  import { listMaterials, enload, getMaterials, delMaterials, addMaterials, updateMaterials } from "@/api/system/materials"
+  import { islegal, listMaterials, enload, getMaterials, delMaterials, addMaterials, updateMaterials } from "@/api/system/materials"
 import { getToken } from '@/utils/auth'
 import store from '@/store'
 import { updateStatusById } from "@/api/system/records"
@@ -735,6 +803,11 @@
     name: "Materials",
     data() {
       return {
+        // 璁板綍鍏冪礌鍒濆浣嶇疆鍜岀姸鎬�
+  originalOffsetLeft: 0,
+        originalWidth: 0,
+            placeholderEl: null,
+
        importDialogVisible: false,
       fileList: [],
       uploadUrl:  process.env.VUE_APP_BASE_API +'/system/materials/upload/'+this.recordId, // 鏇挎崲涓哄疄闄呯殑涓婁紶鎺ュ彛
@@ -804,6 +877,13 @@
         materialsList: [],
         // 寮瑰嚭灞傛爣棰�
         title: "",
+        // 鏂囦欢棰樺悕鎼滅储鐩稿叧
+        titleSuggestions: [], // 鍖归厤鐨勬枃浠堕鍚嶅缓璁垪琛�
+        showTitleSuggestions: false, // 鏄惁鏄剧ず寤鸿妗�
+        titleSearchTimer: null, // 闃叉姈瀹氭椂鍣�
+        creatorSuggestions: [], // 鍖归厤鐨勮矗浠讳汉寤鸿鍒楄〃
+        showCreatorSuggestions: false, // 鏄惁鏄剧ず璐ｄ换浜哄缓璁
+        creatorSearchTimer: null, // 璐ｄ换浜烘煡璇㈤槻鎶栧畾鏃跺櫒
         // 鏄惁鏄剧ず寮瑰嚭灞�
         open: false,
         titles: "",
@@ -848,32 +928,71 @@
         // 琛ㄥ崟鏍￠獙
         rules: {
           creator: [
-           // { required: true, message: "鍒涘缓鑰呬笉鑳戒负绌�", trigger: "blur" }
+           // { required: true, message: "鍒涘缓鑰呬笉鑳戒负绌�", trigger: "blur" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
           ],
           title: [
-            { required: true, message: "妗堝嵎棰樺悕涓嶈兘涓虹┖", trigger: "blur" }
+            { required: true, message: "妗堝嵎棰樺悕涓嶈兘涓虹┖", trigger: "blur" },
+            // { pattern: /^[^\\/:*?"<>涓╙+$/, message: "鏂囦欢鍚嶄笉鑳藉寘鍚� \\:*?"<>涓� 绛夌壒娈婂瓧绗�", trigger: "blur" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
           ],
           date: [
           //  { required: true, message: "鏃ユ湡涓嶈兘涓虹┖", trigger: "blur" },
-            { pattern: /^\d{4}-\d{2}-\d{2}$/, message: "鏃ユ湡鏍煎紡蹇呴』涓簓yyy-mm-dd", trigger: "blur" }
+            { pattern: /^\d{4}-\d{2}-\d{2}$/, message: "鏃ユ湡鏍煎紡蹇呴』涓簓yyy-mm-dd", trigger: "blur" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
           ],
           pageNumber: [
             { required: true, message: "椤靛彿涓嶈兘涓虹┖", trigger: "blur" },
             { type: 'number', message: '椤靛彿蹇呴』涓烘暟瀛楃被鍨�', trigger: ['blur', 'change'] },
-            { pattern: /^\d+$/, message: '璇疯緭鍏ユ鏁存暟', trigger: 'blur' }
+            { pattern: /^[1-9]\d*$/, message: '璇疯緭鍏ュぇ浜�0鐨勬鏁存暟', trigger: 'blur' },
+            // { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
           ],
           stage: [
-            { required: true, message: "鎵�澶勯樁娈典笉鑳戒负绌�", trigger: "change" }
+            { required: true, message: "鎵�澶勯樁娈典笉鑳戒负绌�", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
+          ],
+          fileStyle: [
+            { required: true, message: "鏉愭枡绫诲瀷涓嶈兘涓虹┖", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
+          ],
+          isAttachment: [
+            { required: true, message: "鏄惁涓洪檮浠朵笉鑳戒负绌�", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
+          ],
+          retentionPeriod: [
+            { required: true, message: "淇濈鏈熼檺涓嶈兘涓虹┖", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
+          ],
+          isSensitive: [
+            { required: true, message: "鏄惁鏁忔劅涓嶈兘涓虹┖", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
+          ],
+          isCanceled: [
+            { required: true, message: "鏄惁娉ㄩ攢涓嶈兘涓虹┖", trigger: "change" },
+            { max: 85, message: "鏈�澶ч暱搴︿负85涓瓧绗�", trigger: "blur" }
           ]
         }
       }
     },
+
+
+
    mounted() {
+     // 娣诲姞婊氬姩浜嬩欢鐩戝惉
+     window.addEventListener('scroll', this.handleScroll);
     // 鏀逛负鐩戝惉keydown浜嬩欢
     document.addEventListener('keydown', this.handleKeyDown)
   },
   beforeDestroy() {
+    // 绉婚櫎婊氬姩浜嬩欢鐩戝惉
+
     document.removeEventListener('keydown', this.handleKeyDown)
+    // 绉婚櫎婊氬姩浜嬩欢鐩戝惉
+    window.removeEventListener('scroll', this.handleScroll);
+    // 娓呯悊鍗犱綅绗�
+    if (this.placeholderEl && this.placeholderEl.parentNode) {
+      this.placeholderEl.parentNode.removeChild(this.placeholderEl);
+    }
   },
     created() {
       //const roleId = this.$route.params && this.$route.params.roleId
@@ -949,8 +1068,22 @@
         this.$modal.msgWarning('璇烽�夋嫨涓庤褰曟暟涓�鑷寸殑鏂囦欢')
         return
       }
-      // 鎵ц涓婁紶
-      this.$refs.upload.submit()
+      //鍒ゆ柇椤靛彿涓庝笂浼犱笂浼犵殑鏂囦欢鐨勯〉鍙锋槸涓嶆槸涓�涓�瀵瑰簲鐨�
+     islegal(this.recordId).then(response => {
+       console.log(response.data)
+       var res = response.data
+       if(res)
+       {
+         // 鎵ц涓婁紶
+           this.$refs.upload.submit()
+           this.getList()
+       }
+       else
+       {
+         this.$modal.msgError("椤靛彿涓嶈繛缁紝璇蜂慨鏀逛负杩炵画姝ｇ‘鐨勯〉鍙凤紒")
+       }
+     })
+
     },
     clearFileList() {
       this.fileList = [];
@@ -981,7 +1114,22 @@
       /** 鏌ヨ銆愯濉啓鍔熻兘鍚嶇О銆戝垪琛� */
       getList() {
         this.loading = true
-        listMaterials(this.queryParams).then(response => {
+        
+        // 澶勭悊妗ｆ鍙锋悳绱㈤�昏緫锛屽寘鎷寖鍥存悳绱�
+        const queryParams = { ...this.queryParams }
+        
+        // 妫�鏌ユ槸鍚﹀寘鍚寖鍥存悳绱㈢鍙�
+        if (queryParams.fileNumber && queryParams.fileNumber.includes('~')) {
+          const rangeParts = queryParams.fileNumber.split('~')
+          if (rangeParts.length === 2) {
+            // 瑙ｆ瀽鑼冨洿鎼滅储鍙傛暟
+            // 淇濈暀鍘熷fileNumber鐢ㄤ簬鍏朵粬澶勭悊
+            queryParams.fileNumberStart = rangeParts[0].trim()
+            queryParams.fileNumberEnd = rangeParts[1].trim()
+          }
+        }
+        
+        listMaterials(queryParams).then(response => {
           console.log(response)
           this.materialsList = response.data.data
           this.total = response.data.total
@@ -1024,6 +1172,114 @@
         }
         this.resetForm("forms")
       },
+      // 澶勭悊鏂囦欢棰樺悕杈撳叆浜嬩欢
+      handleTitleInput() {
+        // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒锛堥槻鎶栵級
+        if (this.titleSearchTimer) {
+          clearTimeout(this.titleSearchTimer);
+        }
+
+        // 褰撹緭鍏ユ涓虹┖鏃讹紝娓呯┖寤鸿鍒楄〃
+        if (!this.form.title.trim()) {
+          this.titleSuggestions = [];
+          return;
+        }
+
+        // 璁剧疆鏂扮殑瀹氭椂鍣紝寤惰繜鎵ц鏌ヨ
+        this.titleSearchTimer = setTimeout(() => {
+          this.searchTitleSuggestions();
+        }, 300);
+      },
+
+      // 鎼滅储鏂囦欢棰樺悕寤鸿
+      searchTitleSuggestions() {
+        // 浣跨敤鐜版湁鐨刲istMaterials API锛屼紶鍏itle浣滀负鏌ヨ鍙傛暟
+        listMaterials(
+       {
+          title: this.form.title,
+          pageSize: 10 // 闄愬埗杩斿洖鏁伴噺
+        }).then(response => {
+          console.log(response.data.data)
+        //  alert(23)
+          // 鎻愬彇骞跺幓閲峵itle瀛楁
+          const titles = response.data.data.map(item => item.title);
+          // 鍘婚噸澶勭悊
+          this.titleSuggestions = [...new Set(titles)];
+          // 鏄剧ず寤鸿妗�
+          this.showTitleSuggestions = true;
+        }).catch(() => {
+          // 閿欒澶勭悊
+          this.titleSuggestions = [];
+        });
+      },
+
+      // 澶勭悊澶辩劍浜嬩欢
+      handleTitleBlur() {
+        // 寤惰繜闅愯棌锛屼互渚垮彲浠ョ偣鍑婚�夋嫨寤鸿椤�
+        setTimeout(() => {
+          this.showTitleSuggestions = false;
+        }, 200);
+      },
+
+      // 閫夋嫨寤鸿椤�
+      selectTitleSuggestion(title) {
+        this.form.title = title;
+        this.showTitleSuggestions = false;
+      },
+
+      // 澶勭悊璐ｄ换浜鸿緭鍏ヤ簨浠�
+      handleCreatorInput() {
+        // 娓呴櫎涔嬪墠鐨勫畾鏃跺櫒锛堥槻鎶栵級
+        if (this.creatorSearchTimer) {
+          clearTimeout(this.creatorSearchTimer);
+        }
+
+        // 褰撹緭鍏ユ涓虹┖鏃讹紝娓呯┖寤鸿鍒楄〃
+        if (!this.form.creator.trim()) {
+          this.creatorSuggestions = [];
+          return;
+        }
+
+        // 璁剧疆鏂扮殑瀹氭椂鍣紝寤惰繜鎵ц鏌ヨ
+        this.creatorSearchTimer = setTimeout(() => {
+          this.searchCreatorSuggestions();
+        }, 300);
+      },
+
+      // 鎼滅储璐ｄ换浜哄缓璁�
+      searchCreatorSuggestions() {
+        // 浣跨敤鐜版湁鐨刲istMaterials API锛屼紶鍏reator浣滀负鏌ヨ鍙傛暟
+        listMaterials(
+        {
+          creator: this.form.creator,
+          pageSize: 10 // 闄愬埗杩斿洖鏁伴噺
+        }).then(response => {
+          // 鎻愬彇骞跺幓閲峜reator瀛楁
+          const creators = response.data.data.map(item => item.creator).filter(Boolean);
+          // 鍘婚噸澶勭悊
+          this.creatorSuggestions = [...new Set(creators)];
+          // 鏄剧ず寤鸿妗�
+          this.showCreatorSuggestions = true;
+        }).catch(() => {
+          // 閿欒澶勭悊
+          this.creatorSuggestions = [];
+        });
+      },
+
+      // 澶勭悊璐ｄ换浜鸿緭鍏ユ澶辩劍浜嬩欢
+      handleCreatorBlur() {
+        // 寤惰繜闅愯棌锛屼互渚垮彲浠ョ偣鍑婚�夋嫨寤鸿椤�
+        setTimeout(() => {
+          this.showCreatorSuggestions = false;
+        }, 200);
+      },
+
+      // 閫夋嫨璐ｄ换浜哄缓璁」
+      selectCreatorSuggestion(creator) {
+        this.form.creator = creator;
+        this.showCreatorSuggestions = false;
+      },
+
       // 琛ㄥ崟閲嶇疆
       reset() {
         this.form = {
@@ -1202,11 +1458,25 @@
           this.$modal.msgSuccess("鍒犻櫎鎴愬姛")
         }).catch(() => {})
       },
-      /** 瀵煎嚭鎸夐挳鎿嶄綔 */
+      /** 瀵煎嚭鎸夐挳鎿嶄綔 - 鏀寔瀵煎嚭閫変腑琛屾垨鍏ㄩ儴鏁版嵁 */
       handleExport() {
-        this.download('system/materials/export', {
-          ...this.queryParams
-        }, `materials_${new Date().getTime()}.xlsx`)
+        // 鍒ゆ柇鏄惁鏈夐�変腑鐨勮
+        if (this.ids && this.ids.length > 0) {
+          // 鏄剧ず瀵煎嚭閫変腑琛岀殑鎻愮ず
+          this.$message.info(`姝ｅ湪瀵煎嚭${this.ids.length}鏉￠�変腑鐨勬暟鎹�...`);
+          // 瀵煎嚭閫変腑鐨勮鏁版嵁
+          this.download('system/materials/export', {
+            ids: this.ids.join(','),
+         //   exportType: 'selected'
+          }, `materials_selected_${new Date().getTime()}.xlsx`)
+        } else {
+          // 鏄剧ず瀵煎嚭鍏ㄩ儴鏁版嵁鐨勬彁绀�
+          this.$message.info('姝ｅ湪瀵煎嚭绗﹀悎褰撳墠鏌ヨ鏉′欢鐨勬墍鏈夋暟鎹�...');
+          // 娌℃湁閫変腑琛屾椂锛屽鍑哄綋鍓嶆煡璇㈡潯浠剁殑鏁版嵁
+          this.download('system/materials/export', {
+            ...this.queryParams
+          }, `materials_${new Date().getTime()}.xlsx`)
+        }
       },
 
        /** 瀵煎叆妯℃澘涓嬭浇鎿嶄綔*/
@@ -1225,7 +1495,7 @@
   // }
   const formData = new FormData();
   formData.append('file', file);
- // formData.append('recordId', this.recordId)
+  formData.append('recordId', this.recordId)
   // alert(this.recordId)
   console.log(file)
 
@@ -1277,13 +1547,112 @@
 
       }).catch(() => {})
     },
-    }
+
+    // 婊氬姩浜嬩欢澶勭悊
+    handleScroll() {
+      const fixedRow = document.querySelector('.fixed-row');
+      if (!fixedRow) return;
+
+      // 鑾峰彇鍏冪礌褰撳墠浣嶇疆淇℃伅
+      const rect = fixedRow.getBoundingClientRect();
+      const parentRect = fixedRow.parentNode.getBoundingClientRect();
+
+      // 妫�鏌ュ厓绱犳槸鍚﹀簲璇ヨ繘鍏ユ偓娴姸鎬�
+      if (rect.top <= 0) {
+        // 鍙湪涓嶅湪floating鐘舵�佹椂娣诲姞锛岄伩鍏嶉噸澶嶆搷浣�
+        if (!fixedRow.classList.contains('floating')) {
+          // 璁板綍鍏冪礌鍘熷鐨勫乏鍋忕Щ閲忥紙鐩稿浜庣埗瀹瑰櫒锛�
+          this.originalOffsetLeft = rect.left - parentRect.left;
+          // 璁板綍鍏冪礌鐨勫師濮嬪搴�
+          this.originalWidth = rect.width;
+
+          // 娣诲姞floating绫伙紝浣垮厓绱犲浐瀹氬湪椤堕儴
+          fixedRow.classList.add('floating');
+          // 璁剧疆鍥哄畾浣嶇疆鏃剁殑鏍峰紡锛屼繚鎸佷笌鍘熷甯冨眬涓�鑷�
+          fixedRow.style.left = this.originalOffsetLeft + 'px';
+          fixedRow.style.width = this.originalWidth + 'px';
+
+          // 娣诲姞涓存椂鍗犱綅绗︼紝闃叉椤甸潰甯冨眬璺冲姩
+          if (!this.placeholderEl) {
+            this.placeholderEl = document.createElement('div');
+            this.placeholderEl.style.height = rect.height + 'px';
+            this.placeholderEl.style.marginBottom = '10px';
+            this.placeholderEl.style.boxSizing = 'border-box';
+            fixedRow.parentNode.insertBefore(this.placeholderEl, fixedRow.nextSibling);
+          }
+        }
+      } else {
+        // 褰撳厓绱犲洖鍒拌鍙ｉ《閮ㄤ互涓婃椂锛岀Щ闄ゆ偓娴姸鎬侊紝鎭㈠鍒版枃妗ｆ祦涓�
+        if (fixedRow.classList.contains('floating')) {
+          // 绉婚櫎floating绫�
+          fixedRow.classList.remove('floating');
+          // 閲嶇疆鏍峰紡锛岃娴忚鍣ㄤ娇鐢ㄥ師濮嬫牱寮�
+          fixedRow.style.left = '';
+          fixedRow.style.width = '';
+          // 绉婚櫎鍗犱綅绗︼紝璁╁厓绱犲洖鍒板師濮嬩綅缃�
+          if (this.placeholderEl && this.placeholderEl.parentNode) {
+            this.placeholderEl.parentNode.removeChild(this.placeholderEl);
+            this.placeholderEl = null;
+          }
+        }
+      }
+    },
+
+}
   }
-  </script>
+</script>
 <style scoped>
+.title-search-wrapper {
+        position: relative;
+        width: 100%;
+      }
+
+      .title-suggestions {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        background-color: #fff;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        max-height: 200px;
+        overflow-y: auto;
+        margin-top: 4px;
+      }
+
+      .suggestion-item {
+        padding: 10px 15px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+      }
+
+      .suggestion-item:hover {
+        background-color: #f5f7fa;
+      }
+
 .title-border {
   border-bottom: 1px solid #dcdfe6;
   padding-bottom: 10px;
   margin-bottom: 20px;
 }
+.fixed-row {
+  position: static;
+  z-index: 1000;
+  background-color: #fff;
+  padding: 10px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  margin-bottom: 10px;
+  box-sizing: border-box;
+}
+.fixed-row.floating {
+  position: fixed;
+  top: 0;
+  z-index: 2000;
+  padding: 10px;
+  margin-bottom: 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  background-color: #fff;
+}
 </style>

--
Gitblit v1.9.1