LoongPanel-Asp/web/pages/inspectionRecords.vue

<script setup lang="ts">
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";

definePageMeta({
  layout: 'main',
  middleware: ['auth']
})
const mainLayoutStore = useMainLayoutStore()
const selectWord = ref<string>()
type Document = {
  wordId: string,
  wordName: string,
  lastModifyAt: string,
  createAt: string,
  fileSize: string
  userName: string
}
type template = {
  name: string,
  content: string,
}
const documentList = ref<Document[]>([])
const templateList = ref<template[]>([])
onMounted(() => {
  getWordList()
  $fetch('/Api/Server/GetWordTemplates',{
    method:'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': "Bearer " + useCookie('token').value
    },
    baseURL:useRuntimeConfig().public.baseUrl
  }).then(res=>{
    templateList.value = res as template[]
  })
})
const getWordList = ()=>{
  $fetch('/Api/Server/GetWordList',{
    method:'GET',
    params:{
      ServerId:mainLayoutStore.SelectServer.value,
    },
    headers: {
      'Content-Type': 'application/json',
      'Authorization': "Bearer " + useCookie('token').value
    },
    baseURL:useRuntimeConfig().public.baseUrl
  }).then(res=>{
    documentList.value = res as Document[]
  })
}
const  editVisible= ref(false)
const isPreview = ref(false)
const  selectWordChange=(wordId:string,preview:boolean=false)=>{
  selectWord.value = wordId
  editVisible.value = true
  isPreview.value = preview
}
watch(editVisible,()=>{
  if(!editVisible.value){
    selectWord.value = undefined
    isPreview.value = false
   templateContent.value = undefined
  }
})
const templateVisible = ref(false)
const templateContent= ref<string>()
const selectTemplate = (template:string)=>{
  templateContent.value=template
  editVisible.value = true
  templateVisible.value = false
}
watch(()=>mainLayoutStore.SelectServer.value,()=>{
  getWordList()
})
</script>

<template>
<div class="inspection-layout">
  <n-modal
      v-model:show="editVisible"
      title="编辑器"
      :mask-closable="false"
      :close-on-esc="false"
      size="medium"
      preset="card"
      transform-origin="center"
      style="width: auto"
  >
    <MarkdownEdit :word-id="selectWord" :preview="isPreview" :template="templateContent" />
  </n-modal>
  <n-modal
    title="选择一个模板"
      size="medium"
      preset="card"
    style="width: 500px"
      v-model:show="templateVisible"
  >
    <div class="template-layout">
      <div class="template-item" @click="selectTemplate('')">
        <doc-icons-word/>
        <h5>不使用模板</h5>
      </div>
        <div class="template-item" v-for="t in templateList" :key="t.name"  @click="selectTemplate(t.content)">
          <doc-icons-word/>
          <h5>{{t.name}}</h5>
        </div>
    </div>
  </n-modal>
  <div class="inspection-toolbar">
    <input class="search" placeholder="搜索"/>
    <div class="toolbar-start">
      <button  @click="templateVisible=true">
        <Icon name="Plus" :stroke-width="1.2" />
        <span>新建</span>
      </button>
      <button  @click="getWordList" >
        <Icon name="ListRestart" :stroke-width="1.2" />
        <span>刷新</span>
      </button>
    </div>
  </div>
  <div class="inspection-content">
    <div class="doc-item" v-for="doc in documentList" :key="doc.wordId">
      <div class="icon">
        <doc-icons-word/>
        <h5>{{doc.wordName}}</h5>
      </div>
      <div class="info">
        <p>创建日期:</p>
        <p>{{doc.createAt}}</p>
        <p>最后修改日期：</p>
        <p>{{doc.lastModifyAt}}</p>
        <p>大小:</p>
        <p>{{doc.fileSize}} KiB</p>
        <p>创建者:</p>
        <p>{{doc.userName}}</p>
      </div>
      <div class="action">
        <button v-if="mainLayoutStore.UserInfo.role==='Admin'">删除</button>
        <button @click="selectWordChange(doc.wordId,true)">查看</button>
        <button @click="selectWordChange(doc.wordId)">编辑</button>
      </div>
    </div>
  </div>
</div>

</template>

<style scoped lang="scss">
@import "base";
.inspection-layout{
  width: 100%;
  min-height: 800px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: $gap*2;
  container-type: layout/inline-size;
  *{
    @include SC_Font
  }
}
.inspection-toolbar{
  border: $border;
  display: flex;
  padding: $padding*2;
  border-radius: $radius;
  justify-content: space-between;
  background: $light-bg-color;
  .dark-mode &{
    background: $dark-bg-color;
  }
}
.toolbar-start{
  display: flex;
  gap: $gap;
  button{
    border: unset;
    display: flex;
    height: 100%;
    gap: $gap*.5;
    align-items: center;
    justify-content: center;
    border-radius: $radius;
    background: unset;
    svg,span{
      stroke: rgba(51, 51, 51, 0.6);
      color: rgba(51, 51, 51, 0.6);
    }
    .dark-mode &{
      svg,span{
        stroke: rgba(200, 200, 200, 0.6);
        color: rgba(200, 200, 200, 0.6);
      }
    }
    &:hover,*:hover{
      cursor: pointer;
      svg,span{
        stroke: rgba(51, 51, 51, 1);
        color: rgba(51, 51, 51, 1);
      }
    }

  }
}
.inspection-content{
  border-radius: $radius;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: $gap*2;
}
@for $i from 1 through 20 {
  @media (min-width: #{$i * 450}px) {
    .inspection-content {
      grid-template-columns: repeat($i, 1fr);
    }
  }
}

.doc-item{
  background: $light-bg-color;
  border-radius: $radius;
  border: $border;
  display: grid;
  padding: $padding;
  grid-template-columns: 80px 1fr;
  grid-template-rows: 1fr auto;
  gap: $gap*2;
  .dark-mode &{
    background: $dark-bg-color;
    .icon{
      background: $dark-bg-underline-color;
      h5{
        color: $dark-text-color;
      }
    }
    .info{
      p{
        color: $dark-text-color;
      }
    }
    .action{
      button{
        color: $dark-unfocused-color;
        &:hover{
          color: $dark-text-color;
        }
      }
    }
  }
  .icon{
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: column;
    gap: $gap*.5;
    padding-bottom: $padding*.5;
    align-items: center;
    background: $light-bg-underline-color;
    border-radius: $radius;
    h5{
      color: $light-text-color;
      text-align: center;
      padding: 0 $padding*.5;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: $gap*.5;
    p{
      color: $light-text-color;
    }
  }
  .action{
    display: flex;
    grid-column: 1/3;
    border-top: $border;
    padding: $padding 0 0;
    gap: $gap;
    button{
      flex: 1;
      background: unset;
      border: unset;
      color: $light-unfocused-color;
      border-radius: $radius;
      &:hover{
        cursor: pointer;
        color: $light-text-color;
      }
      button:focus {
        outline: unset;
        border: unset;
      }
    }
  }
}
.template-item{
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: $gap*.5;
  padding-bottom: $padding*.5;
  align-items: center;
  background: $light-bg-underline-color;
  border: $border;
  border-radius: $radius;
  h5{
    text-align: center;
    padding: 0 $padding*.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
.template-layout{
  display: flex;
  gap: $gap;
  flex-wrap: wrap;
  .template-item:first-of-type{
    svg{
      filter: grayscale(100%)
    }
  }
}
.search{
  border: $border;
  padding: $padding*.5;
  border-radius: $radius;
  background: rgba(51, 51, 51, 0.1);
  .dark-mode &{
    background: rgba(51, 51, 51, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

</style>