xyyd-fatfox/src/widgets/notepad/Modal.tsx

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { computed, defineComponent, onMounted, ref } from 'vue'
import decorativeImg from "~/icons/notepad/decorative.png"
import { HiSearch } from "oh-vue-icons/icons";
import useNotepadStore from './useNotepadStore';
import dayjs from 'dayjs';
import clsx from 'clsx';
import Editor from './editor';
import "@milkdown/theme-nord/style.css"
import "@milkdown-lab/plugin-menu/style.css"
import { MilkdownProvider } from '@milkdown/vue';
addIcons(HiSearch)
export default defineComponent(() => {
  const store = useNotepadStore()
  const selectId = ref(store.state.list[0]?.id || '')
  const trriger = ref(true)
  const searchWorks = ref('')
  const currentIndex = computed(() => {
    trriger.value = false
    setTimeout(() => {
      trriger.value = true
    }, 0)
    return store.state.list.findIndex(val => val.id === selectId.value)
  })
  const showList = computed(() => {
    return store.state.list.map(val => val).sort(a => a.pin ? -1 : 1)
  })
  return () => (
    <div
      class="w-full h-full bg-white flex p-4 "

    >
      <div class={"w-[227px]  h-full flex flex-col gap-y-3"}>
        <div class={"flex gap-x-2"}>
          <div class={"flex-1 w-0 relative "}>
            <input type="text"
              value={searchWorks.value}
              onInput={(e: any) => {
                searchWorks.value = e.target.value
              }}
              placeholder='输入内容'
              class={"w-full outline-none h-full pl-2 pr-8 border-[1px] border-[#ddd] rounded-lg text-[#333] placeholder:text-[#C5C5C5]"} />
            <OhVueIcon name={HiSearch.name} class={" absolute right-2 top-1/2 -translate-y-1/2"} fill='#C5C5C5'></OhVueIcon>
          </div>
          <button
            onClick={() => {
              store.addNewNote()
              selectId.value = store.state.list[0]?.id
            }}
            class={"w-[50px] hover:opacity-90 h-[30px] flex items-center justify-center bg-[#b59e86] rounded text-white"}>新建</button>
        </div>
        <div class={"flex-1 h-0 w-full pt-2  "}>
          <div class={"w-full flex  flex-col gap-y-2 "}>
            {
              showList.value.filter(val => val.content.includes(searchWorks.value)).map((item) => (
                <div
                  onClick={() => {
                    selectId.value = item.id
                  }}
                  class={clsx("flex  justify-between w-full cursor-pointer  h-[66px] p-2 pl-3 rounded-lg group  ",
                    selectId.value === item.id ? "bg-[#c7ad9666]" : "bg-[#bdab9b33]"
                  )}>
                  <div class={"flex flex-col  justify-between text-[14px]"}>
                    <span class={"text-[#333]"}>{item.title || '新建笔记'}</span>
                    <span class={"text-[#656565]"}>{dayjs(item.date).format('YYYY-MM-DD')}</span>
                  </div>
                  <div class={"flex flex-col justify-between"}>
                    <img
                      onClick={() => {
                        item.pin = !item.pin

                      }

                      }
                      src='/tab/icons/notepad/top.png' alt='top' class={clsx("w-[22px]", item.pin ? "" : "hidden opacity-70 group-hover:block")}></img>
                    <img
                      onClick={() => {
                        const idx = store.state.list.findIndex(val => val.id === item.id)
                        if (idx !== -1) {
                          store.state.list.splice(idx, 1)
                          // if (index === showList.value.length - 1) {
                          //   selectId.value = showList.value[index - 2]?.id || ''
                          // } else {
                          //   selectId.value = showList.value[index + 1]?.id || ''
                          // }
                          // selectId.value = showList.value[index - 1 > 0 ? index - 1 : (showList.value.length - 1)]?.id || ''
                        }

                      }}
                      src='/tab/icons/notepad/delete.png' alt='delete' class={"hidden group-hover:block w-[22px] opacity-70"}></img>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
      <div class={"w-0 flex-1  h-full pt-2"}>
        <div class={"w-full h-full flex justify-between pl-5 gap-x-5"}>
          <span class={"absolute opacity-0 prose"}></span>
          <img src={decorativeImg} alt='decorativeImg' class={"h-full"}></img>
          <div class={"flex-1 w-0 h-full  flex flex-col"}>
            <input
              maxlength={20}
              onInput={(e: any) => {
                if (store.state.list[currentIndex.value]) {
                  store.state.list[currentIndex.value].title = e.target.value
                }
              }}
              type="text" class={"w-full border-b-[1px]  pb-[3px] border-b-[#bdab9b] outline-none "}
              value={store.state.list[currentIndex.value]?.title || ''} />
            <div class={"flex flex-1 h-0  rounded-lg    mt-3  w-full"}>
              {
                trriger.value &&
                <MilkdownProvider >
                  <Editor
                  
                    class={"w-full h-full "}
                    modelValue={store.state.list[currentIndex.value]?.content || ''} onUpdate:modelValue={(e) => {
                      if (store.state.list[currentIndex.value]) {
                        store.state.list[currentIndex.value].content = e
                      }
                    }}></Editor>
                </MilkdownProvider>
              }



            </div>

          </div>


        </div>

      </div>
    </div >
  )
})