feat: dfm to web

curtis

18小時前 a9f029798b4abd4690781ab48dfe665225e20794

 uiOutput/ErrList/ErrList.vue

@@ -1,103 +1,93 @@
<template>
  <div class="err-list-form flex flex-col bg-gray-100 font-sans" style="width: 841px; height: 636px;">
    <!-- Top Panel: Error Reason & Details -->
    <div class="panel-3 border border-gray-300 flex-none" style="height: 212px;">
      <fieldset class="err-reason-gb m-2 border border-gray-400 p-2 h-[calc(100%-16px)]">
        <legend class="text-black text-base px-1">錯誤原因</legend>
        <div class="relative h-full">
          <!-- ListView for Error Items -->
          <div class="err-list-lv bg-white border border-gray-300 w-full h-[calc(100%-20px)] overflow-auto cursor-pointer"
               @click="errListLVClick" @keyup="errListLVKeyUp" @mousedown="errListLVMouseDown">
            <table class="w-full text-left text-base border-collapse">
              <thead>
                <tr class="bg-gray-200">
                  <th class="p-1 border border-gray-300 font-normal" style="width: 550px;">內容</th>
                  <th class="p-1 border border-gray-300 font-normal" style="width: 80px;">index</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in errListItems" :key="index" 
                    @click="selectItem(index)"
                    :class="{'bg-blue-600 text-white': selectedItemIndex === index, 'hover:bg-gray-100': selectedItemIndex !== index}">
                  <td class="p-1 border border-gray-300">{{ item.content }}</td>
                  <td class="p-1 border border-gray-300">{{ item.index }}</td>
                </tr>
              </tbody>
            </table>
  <div class="err-list-form flex flex-col bg-gray-100 font-sans w-[841px] h-[636px] border border-gray-400 relative overflow-hidden text-sm">
    
    <!-- Top Error Reason Panel (Panel 3) -->
    <div class="h-[212px] flex-none border-b border-gray-300 p-1">
      <fieldset class="w-full h-full border border-gray-400 p-0 flex flex-col">
        <legend class="px-1 ml-2 text-base text-black">錯誤原因</legend>
        
        <div class="flex-1 overflow-auto bg-white m-1 border border-gray-300">
          <table class="w-full border-collapse">
            <thead class="sticky top-0 bg-gray-100">
              <tr class="text-left border-b border-gray-300">
                <th class="p-1 border-r border-gray-200">內容</th>
                <th class="p-1 w-[80px]">index</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in errorItems" 
                  :key="index"
                  :class="['hover:bg-blue-50 cursor-pointer', selectedIndex === index ? 'bg-blue-600 text-white hover:bg-blue-700' : '']"
                  @click="ErrListLVClick(index)">
                <td class="p-1 border-r border-gray-200">{{ item.reason }}</td>
                <td class="p-1">{{ item.index }}</td>
              </tr>
            </tbody>
          </table>
          <div v-if="errorItems.length === 0" class="flex items-center justify-center h-full text-red-600 font-bold text-lg">
            檢核失敗原因已全部清除
          </div>
          
          <!-- Hidden ImageScrollBox3 -->
          <div v-show="false" class="image-scroll-box-3 absolute top-[94px] left-[720px] w-[100px] h-[100px] border"></div>
        </div>
      </fieldset>
    </div>

    <!-- Splitter 3 -->
    <div class="splitter-3 h-[5px] w-full bg-gray-300 cursor-row-resize flex-none"></div>

    <!-- Action Buttons Panel -->
    <div class="panel-1 border border-gray-300 bg-gray-100 flex items-center px-4 space-x-2 flex-none" style="height: 41px;">
      <button class="delete-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm disabled:opacity-50" 
              :disabled="!isDeleteEnabled" @click="DeleteBtClick">忽略</button>
      <button class="enforce-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm" 
              @click="EnforceBtClick">強制傳送</button>
      <button class="immediate-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm" 
              @click="ImmediateBtClick">立即傳送</button>
      
      <!-- Hidden buttons -->
      <button v-show="showNoteBtn" class="note-bt px-4 py-1.5 border border-gray-400 bg-gray-200" @click="NoteBtClick">備註</button>
      <button v-show="showRejectBtn" class="reject-bt px-4 py-1.5 border border-gray-400 bg-gray-200" @click="RejectBtClick">退件</button>
      <button v-show="false" class="button-1 px-4 py-1.5 border border-gray-400 bg-gray-200" @click="Button1Click">Button1</button>

      <div class="flex-grow"></div> <!-- Spacer -->
      <button class="exit-bt px-4 py-1.5 border border-gray-400 bg-gray-200 hover:bg-gray-300 text-sm" 
              @click="ExitBtClick">離開</button>
    <!-- Action Buttons Panel (Panel 1) -->
    <div class="h-[41px] flex-none border-b border-gray-300 flex items-center px-4 space-x-2 bg-gray-50">
      <button class="w-[84px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300 disabled:opacity-50" 
              :disabled="!isDeleteEnabled" @click="DeleteBtClick">
        忽略
      </button>
      <button class="w-[79px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="EnforceBtClick">
        強制送件
      </button>
      <div class="flex-1"></div>
      <button class="w-[89px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300 disabled:opacity-50" 
              :disabled="!isImmediateEnabled" @click="ImmediateBtClick">
        立即傳送
      </button>
      <button class="w-[84px] h-[34px] border border-gray-400 bg-gray-200 hover:bg-gray-300" @click="ExitBtClick">
        離開
      </button>
    </div>

    <!-- Bottom Panel: Image Viewers -->
    <div class="panel-4 flex flex-1 overflow-hidden border border-gray-300">
      
      <!-- Left Image Viewer Panel -->
      <div class="panel-5 flex flex-col h-full w-[407px]">
        <div class="panel-8 flex items-center bg-gray-200 border-b border-gray-300 px-2 h-[28px] flex-none">
          <button class="site-pre-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 mr-1" 
                  :disabled="!isSitePreEnabled" @click="SitePreBtClick">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          </button>
          <span class="label-3 text-sm ml-2">{{ siteIndex }}/{{ siteTotal }}</span>
          <button class="site-next-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 ml-1" 
                  :disabled="!isSiteNextEnabled" @click="SiteNextBtClick">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
    <!-- Image Viewing Area (Panel 4) -->
    <div class="flex-1 flex overflow-hidden">
      <!-- Primary Image View (Panel 5) -->
      <div class="flex-1 flex flex-col border-r border-gray-400 overflow-hidden">
        <div class="h-[28px] bg-gray-200 border-b border-gray-300 flex items-center px-2 space-x-4">
          <button class="w-[29px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs" 
                  :disabled="siteIdx <= 1" @click="SitePreBtClick">◀</button>
          <span class="text-xs font-mono">{{ siteIdx }}/{{ siteCount }}</span>
          <button class="w-[29px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs" 
                  :disabled="siteIdx >= siteCount" @click="SiteNextBtClick">▶</button>
        </div>
        <div class="image-scroll-box-1 flex-1 bg-white border border-gray-300 overflow-auto relative">
           <!-- Placeholder for Main Image -->
           <div class="text-gray-400 absolute inset-0 flex items-center justify-center">Image 1</div>
        <div class="flex-1 bg-gray-800 overflow-auto relative p-2 flex items-center justify-center">
          <img :src="primaryImage" class="max-w-none shadow-xl border border-gray-400" />
          <!-- Mock OMR Error Overlay -->
          <div v-if="siteIdx > 0" class="absolute left-1/2 top-1/4 w-[100px] h-[40px] border-2 border-yellow-400 bg-yellow-200 opacity-40 animate-pulse pointer-events-none"></div>
        </div>
      </div>

      <!-- Splitter 1 -->
      <div class="splitter-1 w-[5px] h-full bg-gray-300 cursor-col-resize flex-none hover:bg-gray-400" @mousedown="startResize"></div>

      <!-- Right Image Viewer Panel (Conditional Visibility in original code based on RelaSite) -->
      <div class="panel-6 flex flex-col h-full flex-1" v-show="showPanel6">
        <div class="panel-9 flex items-center bg-gray-200 border-b border-gray-300 px-2 h-[28px] flex-none">
          <button class="rela-pre-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 mr-1" 
                  :disabled="!isRelaPreEnabled" @click="RelaPreBtClick">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          </button>
          <span class="label-4 text-sm ml-2">{{ relaSiteIndex }}/{{ relaSiteTotal }}</span>
          <button class="rela-next-bt p-0.5 border border-gray-400 bg-gray-100 disabled:opacity-50 ml-1" 
                  :disabled="!isRelaNextEnabled" @click="RelaNextBtClick">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
      <!-- Related Image View (Panel 6) -->
      <div class="w-[427px] flex-none flex flex-col overflow-hidden">
        <div class="h-[28px] bg-gray-200 border-b border-gray-300 flex items-center px-2 space-x-4">
          <button class="w-[31px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs" 
                  :disabled="relaSiteIdx <= 1" @click="RelaPreBtClick">◀</button>
          <span class="text-xs font-mono">{{ relaSiteIdx }}/{{ relaSiteCount }}</span>
          <button class="w-[31px] h-[23px] border border-gray-400 bg-gray-100 flex items-center justify-center text-xs" 
                  :disabled="relaSiteIdx >= relaSiteCount" @click="RelaNextBtClick">▶</button>
        </div>
        <div class="image-scroll-box-2 flex-1 bg-white border border-gray-300 overflow-auto relative">
           <!-- Placeholder for Related Image -->
           <div class="text-gray-400 absolute inset-0 flex items-center justify-center">Image 2 (Related)</div>
        <div class="flex-1 bg-gray-800 overflow-auto relative p-2 flex items-center justify-center">
          <img :src="relatedImage" class="max-w-none shadow-xl border border-gray-400" />
          <!-- Mock Related Error Overlay -->
          <div v-if="relaSiteIdx > 0" class="absolute left-1/3 top-1/3 w-[80px] h-[30px] border-2 border-red-400 bg-red-200 opacity-40 pointer-events-none"></div>
        </div>
      </div>
    </div>

    <!-- Visual Reference Overlay -->
    <div class="err-list-layout opacity-20 pointer-events-none absolute left-0 top-0">
      <img src="assets/ErrList.png" class="w-[841px] h-[636px]" />
    </div>
  </div>
</template>
@@ -109,92 +99,17 @@
export default defineComponent({
  name: 'ErrlistForm',
  setup() {
    const {
      // State
      errListItems,
      selectedItemIndex,
      isDeleteEnabled,
      siteIndex,
      siteTotal,
      isSitePreEnabled,
      isSiteNextEnabled,
      relaSiteIndex,
      relaSiteTotal,
      isRelaPreEnabled,
      isRelaNextEnabled,
      showPanel6,
      showNoteBtn,
      showRejectBtn,
      
      // Actions
      selectItem,
      ErrListLVClick,
      ErrListLVKeyUp,
      ErrListLVMouseDown,
      DeleteBtClick,
      EnforceBtClick,
      ImmediateBtClick,
      ExitBtClick,
      SitePreBtClick,
      SiteNextBtClick,
      RelaPreBtClick,
      RelaNextBtClick,
      NoteBtClick,
      RejectBtClick,
      Button1Click,
      startResize
    } = useErrListLogic();

    return {
      errListItems,
      selectedItemIndex,
      isDeleteEnabled,
      siteIndex,
      siteTotal,
      isSitePreEnabled,
      isSiteNextEnabled,
      relaSiteIndex,
      relaSiteTotal,
      isRelaPreEnabled,
      isRelaNextEnabled,
      showPanel6,
      showNoteBtn,
      showRejectBtn,
      
      selectItem,
      ErrListLVClick,
      ErrListLVKeyUp,
      ErrListLVMouseDown,
      DeleteBtClick,
      EnforceBtClick,
      ImmediateBtClick,
      ExitBtClick,
      SitePreBtClick,
      SiteNextBtClick,
      RelaPreBtClick,
      RelaNextBtClick,
      NoteBtClick,
      RejectBtClick,
      Button1Click,
      startResize
    };
    const logic = useErrListLogic();
    return { ...logic };
  }
});
</script>

<style scoped>
/* Optional: Add custom scrollbar styling to match Delphi look if desired */
.err-list-lv::-webkit-scrollbar {
  width: 16px;
.err-list-form {
  user-select: none;
}
.err-list-lv::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
.err-list-lv::-webkit-scrollbar-thumb {
  background: #c1c1c1; 
  border: 1px solid #f1f1f1;
}
.err-list-lv::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; 
.err-list-layout {
  z-index: 1000;
}
</style>