<template>
<div style="width: 1272px; height: 865px; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
  <div style="align-self: stretch; background: white; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
    <div style="align-self: stretch; padding-bottom: 0.33px; padding-right: 0.33px; background: linear-gradient(90deg, #F8FAFC 100%, #E2E8F0 0%); flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
      <div style="width: 1272.67px; height: 874.67px; position: relative">
        <!-- 左侧边栏 -->
        <div style="width: 280px; height: 875px; left: 0px; top: 0px; position: absolute; background: #F8F9FA; outline: 1px #E5E7EB solid; outline-offset: -1px">
          <!-- 导航按钮 -->
          <div style="padding-top: 16px; padding-bottom: 16px; padding-left: 16px; padding-right: 16.33px; left: 0px; top: 104px; position: absolute; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
            <div
              @click="activeTab = 'myResources'"
              :style="activeTab === 'myResources' ? activeTabStyle : inactiveTabStyle"
              style="align-self: stretch; padding-top: 12px; padding-bottom: 12px; padding-left: 96px; padding-right: 95px; border-radius: 8px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex; cursor: pointer;"
            >
              <div :style="activeTab === 'myResources' ? 'color: white; font-size: 14px; font-family: Inter; font-weight: 700; line-height: 21px; word-wrap: break-word' : 'color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 700; line-height: 21px; word-wrap: break-word'">我的资源</div>
            </div>
            <div
              @click="activeTab = 'publishManagement'"
              :style="activeTab === 'publishManagement' ? activeTabStyle : inactiveTabStyle"
              style="align-self: stretch; padding-top: 12px; padding-bottom: 12px; padding-left: 96px; padding-right: 95px; border-radius: 8px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex; cursor: pointer;"
            >
              <div :style="activeTab === 'publishManagement' ? 'color: white; font-size: 14px; font-family: Inter; font-weight: 700; line-height: 21px; word-wrap: break-word' : 'color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 700; line-height: 21px; word-wrap: break-word'">发布管理</div>
            </div>
          </div>
          <!-- 已选择资源统计 -->
          <div style="padding-top: 16px; padding-bottom: 51px; padding-left: 16px; padding-right: 124px; left: 0px; top: 722px; position: absolute; background: #E6F1FF; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
            <div style="color: #1E40AF; font-size: 20px; font-family: Inter; font-weight: 400; line-height: 30px; word-wrap: break-word">已选择资源数量</div>
            <div style="color: #1E40AF; font-size: 32px; font-family: Inter; font-weight: 700; line-height: 48px; word-wrap: break-word">{{ selectedResourcesCount }}</div>
          </div>
          <!-- 标题区域 -->
          <div style="padding-top: 24px; padding-bottom: 25px; padding-left: 24px; padding-right: 135px; left: 0px; top: 0px; position: absolute; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: inline-flex">
            <div style="color: #1F2937; font-size: 20px; font-family: Inter; font-weight: 700; line-height: 30px; word-wrap: break-word">资源管理系统</div>
            <div style="color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 400; line-height: 21px; word-wrap: break-word">教师端</div>
          </div>
        </div>
        <div style="width: 992.67px; height: 874.67px; left: 280px; top: 0px; position: absolute">
          <div style="padding-top: 24px; padding-bottom: 59.67px; padding-left: 24px; padding-right: 24px; left: 0px; top: 148px; position: absolute; overflow: hidden; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px; display: inline-flex">
            <div style="justify-content: flex-start; align-items: flex-start; gap: 16px; display: inline-flex">
              <div style="justify-content: flex-start; align-items: center; gap: 8px; display: flex">
                <div data-svg-wrapper @click="toggleSelectAll">
                  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="0.5" y="1" width="17" height="17" rx="2.5" :fill="selectAll ? '#1E40AF' : 'white'" stroke="#666666"/>
                  <path v-if="selectAll" d="M5 9.5L8 12.5L13 7.5" stroke="white" stroke-width="2" fill="none"/>
                  </svg>
                </div>
                <div style="color: #374151; font-size: 14px; font-family: Inter; font-weight: 400; line-height: 21px; word-wrap: break-word">全选</div>
              </div>
              <div style="width: 72.56px; height: 21px; position: relative">
                <div style="left: 0px; top: 0px; position: absolute; color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 400; line-height: 21px; word-wrap: break-word">共</div>
                <div style="left: 27px; top: 0px; position: absolute; color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 400; line-height: 21px; word-wrap: break-word">个资源</div>
                <div style="left: 18px; top: 0px; position: absolute; color: #6B7280; font-size: 14px; font-family: Inter; font-weight: 400; line-height: 21px; word-wrap: break-word">{{ totalResourcesCount }}</div>
              </div>
            </div>
            <div style="width: 944.67px; height: 606px; position: relative">
              <div style="padding-top: 16.67px; padding-bottom: 24.67px; padding-left: 17px; padding-right: 16px; left: 484px; top: 0px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                  <div data-svg-wrapper @click="toggleResourceSelection(1)">
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" :fill="selectedResources.includes(1) ? '#1E40AF' : 'white'" stroke="#666666"/>
                    <path v-if="selectedResources.includes(1)" d="M5 9.5L8 12.5L13 7.5" stroke="white" stroke-width="2" fill="none"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">语文阅读理解练习.docx</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-right: 194px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #F0FDF4; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #166534; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">WORD</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #DCFCE7; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #166534; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">已发布</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">1.2 MB</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-14</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12.33px; padding-bottom: 0.67px; padding-right: 311px; outline: 1px #F3F4F6 solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                      <div style="padding-bottom: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding-top: 16.67px; padding-bottom: 16.67px; padding-left: 16.67px; padding-right: 16.33px; left: 0px; top: 210px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                  <div data-svg-wrapper>
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" fill="white" stroke="#666666"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">英语口语教学视频.mp4</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-left: 0.33px; padding-right: 206.67px; justify-content: flex-end; align-items: flex-start; gap: 7px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #FEF3C7; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #92400E; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">VIDEO</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #F3F4F6; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">草稿</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">45.8 MB</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-13</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12px; padding-bottom: 1px; outline: 1px #F3F4F6 solid; outline-offset: -1px; justify-content: flex-end; align-items: center; gap: 263.33px; display: inline-flex">
                      <div style="padding-bottom: 0.33px; padding-left: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                      <div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; background: black; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="text-align: center; color: white; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">发布</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding-top: 16.67px; padding-bottom: 16.67px; padding-left: 17px; padding-right: 16px; left: 484px; top: 420px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                  <div data-svg-wrapper>
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" fill="white" stroke="#666666"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">历史时间轴课件.pptx</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-right: 220px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #EFF6FF; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">PPT</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #F3F4F6; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">草稿</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">5.7 MB</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-10</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12px; padding-bottom: 1px; outline: 1px #F3F4F6 solid; outline-offset: -1px; justify-content: flex-end; align-items: center; gap: 263px; display: inline-flex">
                      <div style="padding-bottom: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                      <div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; background: black; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="text-align: center; color: white; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">发布</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding-top: 16.67px; padding-bottom: 16.67px; padding-left: 16.67px; padding-right: 16.33px; left: 0px; top: 0px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                  <div data-svg-wrapper>
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" fill="white" stroke="#666666"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">数学基础知识点总结.pptx</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-left: 0.33px; padding-right: 219.67px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #EFF6FF; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">PPT</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #F3F4F6; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">草稿</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2.5 MB</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-15</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12px; padding-bottom: 1px; outline: 1px #F3F4F6 solid; outline-offset: -1px; justify-content: flex-end; align-items: center; gap: 263.33px; display: inline-flex">
                      <div style="padding-bottom: 0.33px; padding-left: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                      <div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; background: black; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="text-align: center; color: white; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">发布</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding-top: 16.67px; padding-bottom: 24.67px; padding-left: 17px; padding-right: 16px; left: 484px; top: 210px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                  <div data-svg-wrapper>
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" fill="white" stroke="#666666"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; justify-content: flex-start; align-items: flex-start; gap: 12px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">物理实验演示.pptx</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-right: 208px; justify-content: flex-start; align-items: flex-start; gap: 8px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #EFF6FF; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">PPT</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #DCFCE7; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #166534; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">已发布</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">8.3 MB</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-12</div>
                            <div style="left: 0px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12.33px; padding-bottom: 0.67px; padding-right: 311px; outline: 1px #F3F4F6 solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: flex">
                      <div style="padding-bottom: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="padding-top: 16.67px; padding-bottom: 16.67px; padding-left: 16.67px; padding-right: 16.33px; left: 0px; top: 420px; position: absolute; background: white; border-radius: 12px; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                  <div data-svg-wrapper>
                    <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1.1665" width="17" height="17" rx="2.5" fill="white" stroke="#666666"/>
                    </svg>
                  </div>
                  <div style="flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12.33px; display: inline-flex">
                    <div style="align-self: stretch; padding-left: 0.33px; justify-content: flex-start; align-items: flex-start; gap: 11.67px; display: inline-flex">
                      <img style="width: 80px; height: 60px; border-radius: 6px" src="https://placehold.co/80x60" />
                      <div style="flex-direction: column; justify-content: center; align-items: flex-start; gap: 6.33px; display: inline-flex">
                        <div style="color: #1F2937; font-size: 16px; font-family: Inter; font-weight: 500; line-height: 24px; word-wrap: break-word">化学方程式汇总.pdf</div>
                        <div style="align-self: stretch; padding-top: 0.33px; padding-left: 0.33px; padding-right: 219.67px; justify-content: center; align-items: flex-start; gap: 8px; display: inline-flex">
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #FEE2E2; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">PDF</div>
                          </div>
                          <div style="padding-left: 8px; padding-right: 8px; padding-top: 4px; padding-bottom: 4px; background: #F3F4F6; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                            <div style="color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">草稿</div>
                          </div>
                        </div>
                        <div style="align-self: stretch; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; display: flex">
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">3.1 MB</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">大小:</div>
                          </div>
                          <div style="width: 307px; height: 18px; position: relative">
                            <div style="left: 31.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">2024-01-11</div>
                            <div style="left: 0.33px; top: 0.33px; position: absolute; color: #6B7280; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">创建:</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="align-self: stretch; padding-top: 12px; padding-bottom: 1px; outline: 1px #F3F4F6 solid; outline-offset: -1px; justify-content: flex-end; align-items: center; gap: 263.33px; display: inline-flex">
                      <div style="padding-bottom: 0.33px; padding-left: 0.33px; justify-content: center; align-items: flex-start; gap: 8px; display: flex">
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">预览</div>
                        <div style="text-align: center; color: #1E40AF; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">编辑</div>
                        <div style="text-align: center; color: #DC2626; font-size: 12px; font-family: Inter; font-weight: 400; line-height: 18px; word-wrap: break-word">删除</div>
                      </div>
                      <div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px; background: black; border-radius: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex">
                        <div style="text-align: center; color: white; font-size: 12px; font-family: Inter; font-weight: 500; line-height: 18px; word-wrap: break-word">发布</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="padding-top: 24px; padding-bottom: 26px; padding-left: 24px; padding-right: 24.33px; left: 0px; top: 0px; position: absolute; background: white; outline: 1px #E5E7EB solid; outline-offset: -1px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; display: inline-flex">
            <div style="color: #1F2937; font-size: 24px; font-family: Inter; font-weight: 700; line-height: 36px; word-wrap: break-word">教学资源库</div>
            <div style="width: 944.67px; height: 38px; position: relative">
              <div style="width: 129.33px; height: 35px; left: 0px; top: 1.50px; position: absolute">
                <div style="width: 79px; height: 35px; left: 50px; top: 0.50px; position: absolute; background: #D9D9D9; border-radius: 6px"></div>
                <div data-svg-wrapper style="left: 113px; top: 13.50px; position: absolute">
                  <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1H1L5 9L9 1Z" stroke="black"/>
                  </svg>
                </div>
                <div style="left: 0px; top: 6.50px; position: absolute; color: #374151; font-size: 14px; font-family: Inter; font-weight: 500; line-height: 21px; word-wrap: break-word">类型：</div>
                <div style="left: 65px; top: 8.50px; position: absolute; justify-content: center; display: flex; flex-direction: column; color: black; font-size: 14px; font-family: Inter; font-weight: 400; word-wrap: break-word">全部</div>
              </div>
              <div style="width: 136px; height: 35px; left: 145.33px; top: 1.50px; position: absolute">
                <div style="width: 86px; height: 35px; left: 49.67px; top: 0.50px; position: absolute; background: #D9D9D9; border-radius: 6px"></div>
                <div style="left: 67.67px; top: 6.50px; position: absolute; justify-content: center; display: flex; flex-direction: column; color: black; font-size: 14px; font-family: Inter; font-weight: 400; word-wrap: break-word">全部</div>
                <div data-svg-wrapper style="left: 119.67px; top: 13.50px; position: absolute">
                  <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M9 1H1L5 9L9 1Z" stroke="black"/>
                  </svg>
                </div>
                <div style="left: -0.33px; top: 6.50px; position: absolute; color: #374151; font-size: 14px; font-family: Inter; font-weight: 500; line-height: 21px; word-wrap: break-word">状态：</div>
              </div>
              <div style="padding-top: 8px; padding-bottom: 9px; padding-left: 16px; padding-right: 16px; left: 513px; top: 0px; position: absolute; background: black; border-radius: 8px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex; cursor: pointer;" @click="searchResources">
                <div style="text-align: center; color: white; font-size: 14px; font-family: Inter; font-weight: 700; line-height: 21px; word-wrap: break-word">搜索</div>
              </div>
              <div style="padding-top: 8px; padding-bottom: 9px; padding-left: 17px; padding-right: 16px; left: 589px; top: 0px; position: absolute; background: #F9FAFB; border-radius: 8px; outline: 1px #D1D5DB solid; outline-offset: -1px; flex-direction: column; justify-content: flex-start; align-items: flex-start; display: inline-flex; cursor: pointer;" @click="resetFilters">
                <div style="text-align: center; color: black; font-size: 14px; font-family: Inter; font-weight: 500; line-height: 21px; word-wrap: break-word">重置</div>
              </div>
              <div style="width: 200px; height: 38px; left: 297px; top: 0px; position: absolute; border-radius: 6px; border: 1px #D1D5DB solid; position: relative;">
                <input
                  v-model="searchKeyword"
                  type="text"
                  placeholder="搜索资源名称..."
                  style="width: 100%; height: 100%; border: none; outline: none; padding: 0 14px; border-radius: 6px; font-size: 14px; font-family: Inter; background: transparent;"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 响应式数据
const activeTab = ref('myResources')
const selectAll = ref(false)
const selectedResources = ref<number[]>([])
const searchKeyword = ref('')
const selectedType = ref('全部')
const selectedStatus = ref('全部')

// 资源数据
const resources = ref([
  {
    id: 1,
    name: '语文阅读理解练习.docx',
    type: 'WORD',
    status: '已发布',
    size: '1.2 MB',
    createDate: '2024-01-14',
    typeColor: '#F0FDF4',
    typeTextColor: '#166534',
    statusColor: '#DCFCE7',
    statusTextColor: '#166534'
  },
  {
    id: 2,
    name: '英语口语教学视频.mp4',
    type: 'VIDEO',
    status: '草稿',
    size: '45.8 MB',
    createDate: '2024-01-13',
    typeColor: '#FEF3C7',
    typeTextColor: '#92400E',
    statusColor: '#F3F4F6',
    statusTextColor: '#6B7280'
  },
  {
    id: 3,
    name: '数学基础知识点总结.pptx',
    type: 'PPT',
    status: '草稿',
    size: '2.5 MB',
    createDate: '2024-01-15',
    typeColor: '#EFF6FF',
    typeTextColor: '#1E40AF',
    statusColor: '#F3F4F6',
    statusTextColor: '#6B7280'
  },
  {
    id: 4,
    name: '物理实验演示.pptx',
    type: 'PPT',
    status: '已发布',
    size: '8.3 MB',
    createDate: '2024-01-12',
    typeColor: '#EFF6FF',
    typeTextColor: '#1E40AF',
    statusColor: '#DCFCE7',
    statusTextColor: '#166534'
  },
  {
    id: 5,
    name: '历史时间轴课件.pptx',
    type: 'PPT',
    status: '草稿',
    size: '5.7 MB',
    createDate: '2024-01-10',
    typeColor: '#EFF6FF',
    typeTextColor: '#1E40AF',
    statusColor: '#F3F4F6',
    statusTextColor: '#6B7280'
  },
  {
    id: 6,
    name: '化学方程式汇总.pdf',
    type: 'PDF',
    status: '草稿',
    size: '3.1 MB',
    createDate: '2024-01-11',
    typeColor: '#FEE2E2',
    typeTextColor: '#DC2626',
    statusColor: '#F3F4F6',
    statusTextColor: '#6B7280'
  }
])

// 计算属性
const activeTabStyle = computed(() => ({
  background: '#1E40AF'
}))

const inactiveTabStyle = computed(() => ({
  background: 'transparent'
}))

const selectedResourcesCount = computed(() => selectedResources.value.length)

const totalResourcesCount = computed(() => resources.value.length)

// 方法
const toggleSelectAll = () => {
  selectAll.value = !selectAll.value
  if (selectAll.value) {
    selectedResources.value = resources.value.map(r => r.id)
  } else {
    selectedResources.value = []
  }
}

const toggleResourceSelection = (resourceId: number) => {
  const index = selectedResources.value.indexOf(resourceId)
  if (index > -1) {
    selectedResources.value.splice(index, 1)
  } else {
    selectedResources.value.push(resourceId)
  }
}

const searchResources = () => {
  // 搜索逻辑
  console.log('搜索资源:', searchKeyword.value)
}

const resetFilters = () => {
  searchKeyword.value = ''
  selectedType.value = '全部'
  selectedStatus.value = '全部'
}

const previewResource = (resourceId: number) => {
  console.log('预览资源:', resourceId)
}

const editResource = (resourceId: number) => {
  console.log('编辑资源:', resourceId)
}

const deleteResource = (resourceId: number) => {
  console.log('删除资源:', resourceId)
}

const publishResource = (resourceId: number) => {
  console.log('发布资源:', resourceId)
}
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>


将所有的样式提取到style，不更改任何原有样式