tianyunperfect
/
web-base--


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>memos记录</title>

    <script src="js/util.js"></script>
    <script src="js/login.js"></script>
    <link rel="stylesheet" href="memos.css" />
    <script src="js/vue.min.js"></script>
    <script src="elementUI/index.js"></script>
    <link rel="stylesheet" href="elementUI/index.css" />
    <link rel="stylesheet" href="css/vditor.css" />
    <script src="js/vditor.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="all" style="max-width: 1500px; margin: 0 auto">
        <div class="myTop">
          <el-link href="https://memos.tianyunperfect.cn/">memos主页</el-link>
          <el-button @click="page = page - 1;search()" :disabled="page === 1"
            >上一页</el-button
          >
          <el-input
            type="number"
            style="width: 80px"
            v-model="page"
            @change="search"
          ></el-input>
          <el-button @click="page = page + 1;search()">下一页</el-button>
          <el-select
            v-model="size"
            placeholder="请选择"
            style="width: 80px"
            @change="search"
          >
            <el-option
              v-for="item in [10, 20, 50, 100]"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <!--输入框，绑定回车事件，触发查询-->
          <el-input
            style="margin-left: 30px; width: 20vw; padding-left: 10px"
            placeholder="关键字"
            v-model="searchStr"
            @change="searchStrChange"
          ></el-input>
          <el-input
            style="margin-left: 30px; width: 20vw; padding-left: 10px"
            placeholder="AI 问答"
            v-model="searchStr2"
            @change="searchStrChange2"
          ></el-input>
          <br /><br />
          <div></div>
          <div style="display: flex; align-items: stretch; width: 60vw">
            <!-- 创建一个用于编辑的容器 -->
            <el-input
              @paste.native="handlePaste"
              @keydown.enter.native="keyDown"
              type="textarea"
              :autosize="{minRows:2}"
              placeholder="记录内容"
              @input="localStorage.setItem('contentStr', contentStr)"
              v-model="contentStr"
            >
            </el-input>

            <!-- 添加发送按钮 -->
            <el-button
              style="margin-left: 20px; width: 10%; font-size: 2rem"
              @click="sendData"
              :disabled="!sendBtnAble"
              >记录</el-button
            >
            <el-button
              style="margin-left: 20px; width: 10%; font-size: 1rem"
              @click="mergeByIds"
              >合并</el-button
            >
            <div
              @click="dialogVisible2=true"
              style="font-size: 0.3em; margin-left: 2px"
            >
              替换
            </div>
          </div>
          <div style="display: flex">
            <div v-for="item in tmpFileIds">
              <el-image
                v-if="item['type'].startsWith('image')"
                :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
                :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
                class="img"
              ></el-image>
              <audio controls v-if="item['type'].startsWith('audio')">
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="audio/ogg"
                />
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="audio/mpeg"
                />
                您的浏览器不支持 audio 元素。
              </audio>
              <video
                width="320"
                height="240"
                controls
                v-if="item['type'].startsWith('video')"
              >
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="video/mp4"
                />
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="video/ogg"
                />
                您的浏览器不支持 HTML5 video 元素。
              </video>
              <el-link
                v-if="item['type'].startsWith('application')"
                :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                target="_blank"
                >{{item['filename']}}</el-link
              >
              <div @click="removeTmp(item)">删除</div>
            </div>
          </div>

          <!-- 添加多选按钮 -->
          <div style="display: flex">
            <div style="max-width: 55vw; height: 2.5em; overflow-y: scroll">
              <el-checkbox-group v-model="tagChecked" @change="checkChange1()">
                <el-checkbox-button
                  v-for="tag in allTags"
                  :label="tag"
                ></el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div style="margin-left: 20px; display: flex; align-items: center">
              <el-switch
                @change="duoxuanChange"
                v-model="duoxuan"
                active-text="多选"
                inactive-text="单选"
              >
              </el-switch>
            </div>
          </div>
          <div id="tags"></div>
        </div>

        <div style="margin-top: 180px"></div>
        <div v-if="searchStr2" style="margin: 10px; padding: 10px">
          <el-input
            v-model="searchResStr"
            type="textarea"
            :autosize="{minRows: 1}"
            readonly="true"
          ></el-input>
        </div>
        <div>
          <div v-for="item in contentList" class="myLine">
            <el-row style="margin: 10px; padding: 10px" class="border">
              <el-col :span="18" class="contentLine">
                <div style="display: flex">
                  <el-date-picker
                    v-model="item.created_ts"
                    type="datetime"
                    readonly="true"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                  <div style="margin-left: 20px">
                    <el-checkbox-button
                      v-for="tag in commonTags"
                      :label="tag"
                      :key="item"
                      @change="checked=>checkChange(checked,item,tag)"
                      :checked="isChooseTag(item,tag)"
                      >{{tag}}
                    </el-checkbox-button>
                  </div>
                </div>
                <div class="myText" @dblclick="edit(item)">
                  <!--                        <el-input v-model="item.content" type="textarea" :autosize="{minRows: 1}" readonly="true"></el-input>-->
                  <div :id="item.resource_name"></div>
                </div>
                <div style="display: flex">
                  <div v-for="item in resourceMap[item.id]">
                    <el-image
                      v-if="item['type'].startsWith('image')"
                      :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
                      :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
                      fit="cover"
                      class="img"
                    >
                    </el-image>
                    <audio controls v-if="item['type'].startsWith('audio')">
                      <source
                        :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                        type="audio/ogg"
                      />
                      <source
                        :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                        type="audio/mpeg"
                      />
                      您的浏览器不支持 audio 元素。
                    </audio>
                    <video
                      width="320"
                      height="240"
                      controls
                      v-if="item['type'].startsWith('video')"
                    >
                      <source
                        :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                        type="video/mp4"
                      />
                      <source
                        :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                        type="video/ogg"
                      />
                      您的浏览器不支持 HTML5 video 元素。
                    </video>
                    <el-link
                      v-if="item['type'].startsWith('application')"
                      :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                      target="_blank"
                      >{{item['filename']}}</el-link
                    >
                  </div>
                </div>
              </el-col>
              <el-col :span="4" style="display: flex">
                <div class="editClass">
                  <el-button
                    size="small"
                    @click="window.open('https://memos.tianyunperfect.cn/m/' + item.resource_name)"
                    >跳转</el-button
                  >
                  <br />
                  <br />
                  <el-button size="small" @click="edit(item)">编辑</el-button>
                </div>
                <div class="editClass">
                  <el-button size="small" @click="archive(item)"
                    >归档</el-button
                  >
                  <br />
                  <br />
                  <el-button size="small" type="warning" @click="del(item)">
                    {{ item.pendingDelete ? `恢复(${item.countdown}s)` : '删除'
                    }}
                  </el-button>
                </div>
                <div class="editClass" style="margin-left: 30px">
                  <el-checkbox
                    :value="selectedIds.includes(item.id)"
                    @change="handleCheckboxChange(item.id, $event)"
                    >合并</el-checkbox
                  >
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="60%">
        <div v-if="tmpItem.id" class="contentLine">
          <div>
            <el-date-picker
              v-model="tmpItem.created_ts"
              type="datetime"
              value-format="yyyy-MM-ddTHH:mm:ss"
              placeholder="选择日期时间"
            >
            </el-date-picker>
            <!-- el-input 只处理粘贴事件 -->
            <el-input
              @paste.native="handlePaste2"
              placeholder="粘贴图片"
              style="width: 50%"
            >
            </el-input>
          </div>
          <div>
            <div id="vditor"></div>
            <!-- <el-input
              ref="contentEdit"
              v-model="tmpItem.content"
              type="textarea"
              :autosize="{minRows: 2}"
            ></el-input> -->
          </div>
          <div style="display: flex">
            <div v-for="item in cloneFileIds">
              <el-image
                v-if="item['type'].startsWith('image')"
                :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=150'"
                :preview-src-list="['https://memos_assert.tianyunperfect.cn/' + item['internal_path'] + '?width=750']"
                class="img"
              >
              </el-image>
              <audio controls v-if="item['type'].startsWith('audio')">
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="audio/ogg"
                />
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="audio/mpeg"
                />
                您的浏览器不支持 audio 元素。
              </audio>
              <video
                width="320"
                height="240"
                controls
                v-if="item['type'].startsWith('video')"
              >
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="video/mp4"
                />
                <source
                  :src="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                  type="video/ogg"
                />
                您的浏览器不支持 HTML5 video 元素。
              </video>
              <el-link
                v-if="item['type'].startsWith('application')"
                :href="'https://memos_assert.tianyunperfect.cn/' + item['internal_path']"
                target="_blank"
                >{{item['filename']}}</el-link
              >
              <div @click="delPic(item)">删除</div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmSubmit">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="替换(危险操作，不可撤销）"
        :visible.sync="dialogVisible2"
        width="60%"
      >
        <div class="contentLine">
          <div>
            <el-input v-model="old_text" placeholder="old"></el-input>
            <el-input v-model="new_text" placeholder="new"></el-input>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="confirmSubmit2">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
    <script>
      let myHeaders = {
        "Content-type": "application/json",
        Authorization: "",
      };

      function getRandomId() {
        return Math.random().toString(36).substr(2);
      }

      let vm = new Vue({
        el: "#app",
        data: {
          contentEditor: "", // vditor实例
          dialogVisible2: false,
          old_text: "",
          new_text: "",
          searchStr2: "",
          searchResStr: "",
          selectedIds: [],
          duoxuan: false,
          tmpItem: {},
          dialogVisible: false,
          page: 1,
          size: 20,
          searchStr: "",
          contentStr: "",
          tagChecked: [],
          allTags: [],
          contentList: [],
          sendBtnAble: true,
          resourceMap: {}, // 资源map,
          commonTags: ["todo"],
          upload_url: "https://memos.tianyunperfect.cn/api/v1/resource/blob",
          tmpFileIds: [],
          cloneFileIds: [],
        },
        watch: {
          page: function () {
            this.search();
          },
          size: function () {
            this.search();
          },
          contentList: function () {
            console.log(1);
            this.$nextTick(() => {
              console.log(2);
              this.contentList.forEach((item) => {
                this.resetView(item);
              });
            });
          },
        },
        mounted() {
          if (!checkLogin()) {
            // 警告并刷新页面
            alert("登录失败，请先登录");
            location.reload();
          }
          myHeaders.Authorization = "bearer " + getCookie("token");
          if (this.getQueryStr()) {
            this.searchStr = this.getQueryStr();
          }
          this.duoxuan = this.getDuoXuan();
          // 初始化contentStr，如果本地有缓存
          let item = localStorage.getItem("contentStr");
          if (item) {
            this.contentStr = item;
          }
          let queryStr = this.getQueryStr();
          if (queryStr) {
            // queryStr 解码
            queryStr = decodeURIComponent(queryStr);
            this.searchStr = queryStr;
          }
          // 解码
          let tagsStr = decodeURIComponent(getQueryString("tags"));
          if (tagsStr) {
            this.tagChecked = tagsStr.split(",");
          }

          // this.getAllTags();
          this.search();

          requestUtil
            .async(
              "https://web_history.tianyunperfect.cn/memos/getCustomMemoTags",
              "get"
            )
            .then((res) => {
              this.commonTags = JSON.parse(res["res"][0]["content"]);
              this.allTags = this.commonTags;
            });
        },
        methods: {
          resetView(item) {
            Vditor.preview(
              document.getElementById(item.resource_name),
              item.content,
              {
                cdn: "https://ld246.com/js/lib/vditor",
                speech: {
                  enable: false,
                },
                anchor: 1,
                after() {},
              }
            );
          },
          mergeByIds() {
            if (this.selectedIds.length < 2) {
              return;
            }
            requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/mergeMemo",
              "post",
              { ids: this.selectedIds },
              {}
            );
            location.reload();
          },
          handleCheckboxChange(id, checked) {
            if (checked) {
              this.selectedIds.push(id);
            } else {
              this.selectedIds = this.selectedIds.filter(
                (selectedId) => selectedId !== id
              );
            }
            console.log(this.selectedIds);
          },
          searchStrChange() {
            let queryStr = this.searchStr;
            // url编码
            queryStr = encodeURIComponent(queryStr);
            location.href = requestUtil.buildUrl(location.href, {
              queryStr: queryStr,
            });
          },
          searchStrChange2() {
            this.searchResStr = "";
            requestUtil
              .async(
                "https://wx.tianyunperfect.cn/full_search?",
                "post",
                { search: this.searchStr2 },
                {}
              )
              .then((res) => {
                if (res["list"]) {
                  let resList = res["list"];
                  this.searchResStr = res["res"];
                  this.contentList = resList;
                  this.searchByContent();
                }
              });
          },
          duoxuanChange() {
            if (this.duoxuan) {
              this.setDuoXuan("ok");
            } else {
              this.setDuoXuan("");
            }
          },
          checkChange1(newVal) {
            console.log(this.tagChecked);
            if (!this.getDuoXuan()) {
              if (this.tagChecked.length > 1) {
                // 保留最后一个
                this.tagChecked = [this.tagChecked[this.tagChecked.length - 1]];
              }
            }

            location.href = requestUtil.buildUrl(location.href, {
              tags: this.tagChecked.join(","),
            });
          },
          getQueryStr() {
            return getQueryString("queryStr");
          },
          getDuoXuan() {
            return getQueryString("duoxuan") == "ok";
          },
          setDuoXuan(ok) {
            location.href = requestUtil.buildUrl(location.href, {
              duoxuan: ok,
            });
          },
          removeTmp(item) {
            // tmpFileIds 根据id删除
            let index = this.tmpFileIds.findIndex(
              (item) => item.id === item.id
            );
            if (index !== -1) {
              this.tmpFileIds.splice(index, 1);
            }
          },
          delPic(img) {
            // 根据id从  cloneFileIds 删除
            let index = this.cloneFileIds.findIndex(
              (item) => item.id === img.id
            );
            if (index !== -1) {
              this.cloneFileIds.splice(index, 1);
            }
          },
          getCloneResourceIds(id) {
            let resourceMapElement = this.resourceMap[id];
            if (resourceMapElement) {
              return JSON.parse(JSON.stringify(resourceMapElement));
            }
            return [];
          },
          uploadFile(url, file, headers = {}) {
            return new Promise((resolve, reject) => {
              const xhr = new XMLHttpRequest();
              xhr.open("POST", url, true); // 使用异步的方式
              const formData = new FormData();
              formData.append("file", file);
              for (const [key, value] of Object.entries(headers)) {
                xhr.setRequestHeader(key, value);
              }
              xhr.onload = function () {
                if (xhr.status === 200) {
                  resolve(JSON.parse(xhr.responseText));
                } else {
                  reject(new Error(xhr.statusText));
                }
              };
              xhr.onerror = function () {
                reject(new Error("Network Error"));
              };
              xhr.send(formData);
            });
          },
          getFileFromPaste(e) {
            let clipboardData = e.clipboardData; // IE
            if (!clipboardData) {
              //chrome
              clipboardData = e.originalEvent.clipboardData;
            }
            let items = "";
            items = (e.clipboardData || window.clipboardData).items;
            let file = null;
            if (!items || items.length === 0) {
              this.$message.error(
                "当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！"
              );
              return;
            }
            // 搜索剪切板items
            for (let i = 0; i < items.length; i++) {
              // 限制上传文件类型
              if (items[i].type.indexOf("image") !== -1) {
                file = items[i].getAsFile();
                break;
              }
            }
            // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
            if (file) {
              return file;
            }
          },
          handlePaste(e) {
            let file = this.getFileFromPaste(e);
            // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
            if (file) {
              this.uploadFile(this.upload_url, file, {
                Authorization: myHeaders["Authorization"],
              }).then((res) => {
                let fileId = res["id"];
                if (fileId) {
                  let sourceRes = requestUtil.sync(
                    "https://web_history.tianyunperfect.cn/memos/resourceById",
                    "post",
                    { ids: fileId },
                    {}
                  );
                  let sourceRe = sourceRes["res"];
                  this.tmpFileIds.push(...sourceRe);
                }
              });
            }
          },
          handlePaste2(e) {
            let file = this.getFileFromPaste(e);
            // 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数
            if (file) {
              this.uploadFile(this.upload_url, file, {
                Authorization: myHeaders["Authorization"],
              }).then((res) => {
                let fileId = res["id"];
                if (fileId) {
                  let sourceRes = requestUtil.sync(
                    "https://web_history.tianyunperfect.cn/memos/resourceById",
                    "post",
                    { ids: fileId },
                    {}
                  );
                  let sourceRe = sourceRes["res"];
                  this.cloneFileIds.push(...sourceRe);
                }
              });
            }
          },
          keyDown() {
            // 如果是ctrl + enter \ meta + enter 则发送
            if (event.ctrlKey || event.metaKey) {
              this.sendData();
            }
          },
          msg(content) {
            this.$message({
              message: content,
              type: "success",
            });
          },
          isChooseTag(item, tag) {
            return item.content.indexOf("#" + tag + " ") !== -1;
          },
          checkChange(val, item, tag) {
            if (val) {
              this.addTag(item, tag);
            } else {
              this.delTag(item, tag);
            }
            this.resetView(item);
          },
          addTag(item, cTag) {
            let content = item.content;
            // 如果已经有了，就不添加
            let tmpTag = "#" + cTag + " ";
            if (content.indexOf(tmpTag) !== -1) {
              return;
            }
            item.content = tmpTag + content;
            // 提交记录
            let res = requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/updateContent",
              "post",
              {
                id: item.id,
                content: item.content,
                created_ts: item.created_ts,
              },
              {}
            );
            if (res.code === 200) {
              this.msg("更新成功");
              // this.search();
            }
          },
          delTag(item, cTag) {
            let content = item.content;
            // 如果没有，就不删除
            if (content.indexOf(cTag) === -1) {
              return;
            }
            item.content = content.replaceAll("#" + cTag + " ", "");
            // 最少有一个标签
            if (!item.content.includes("#")) {
              item.content = "#todo " + item.content;
            }
            // 提交记录
            let res = requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/updateContent",
              "post",
              {
                id: item.id,
                content: item.content,
                created_ts: item.created_ts,
              },
              {}
            );
            if (res.code === 200) {
              this.msg("更新成功");
              // this.search();
            }
          },
          // 修正后的删除逻辑，总计时3秒支持撤销
          del(item) {
            // 如果正在等待删除，则取消删除
            if (item.pendingDelete) {
              clearInterval(item.countdownInterval);
              this.$set(item, "pendingDelete", false);
              this.$set(item, "countdown", 0);
              this.$notify({
                type: "info",
                title: "已取消",
                message: "已取消删除操作",
                duration: 1500,
              });
              return;
            }

            // 开始删除倒计时
            this.$set(item, "pendingDelete", true);
            this.$set(item, "countdown", 5);

            // 设置倒计时通知
            item.countdownInterval = setInterval(() => {
              this.$set(item, "countdown", item.countdown - 1);
              if (item.countdown <= 0) {
                clearInterval(item.countdownInterval);
                // 执行删除请求
                requestUtil
                  .async(
                    `https://web_history.tianyunperfect.cn/memos/delete`,
                    "post",
                    { id: item.id },
                    {}
                  )
                  .then((res) => {
                    if (res.code === 200) {
                      this.msg("删除成功");
                      this.contentList = this.contentList.filter(
                        (it) => it.id !== item.id
                      );
                    }
                  });
              }
            }, 1000);
          },
          archive(item) {
            requestUtil
              .async(
                `https://web_history.tianyunperfect.cn/memos/archive`,
                "post",
                { id: item.id },
                {}
              )
              .then((res) => {
                this.msg("归档成功");
                // 本地缓存更新
                this.contentList = this.contentList.filter(
                  (it) => it.id !== item.id
                );
              });
          },
          handleClose(done) {
            this.dialogVisible = false;
            done();
          },
          confirmSubmit(done) {
            // 提交记录
            let res = requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/update",
              "post",
              {
                id: this.tmpItem.id,
                content: this.contentEditor.getValue(),
                created_ts: this.tmpItem.created_ts,
                resourceIdList: this.cloneFileIds.map((it) => it.id),
              },
              {}
            );
            if (res.code === 200) {
              this.msg("更新成功");
              this.tmpItem.content = this.contentEditor.getValue();
              this.resetView(this.tmpItem);
              // 更新主页面的图片
              this.resourceMap[this.tmpItem.id] = this.cloneFileIds;

              // this.search();
            }
            this.dialogVisible = false;
            done();
          },
          edit(item) {
            this.tmpItem = item;
            this.cloneFileIds = this.getCloneResourceIds(item.id);
            this.dialogVisible = true;
            this.$nextTick(() => {
              this.contentEditor = new Vditor("vditor", {
                height: 360,
                toolbarConfig: {
                  // pin: true,
                },
                cache: {
                  enable: false,
                },
                mode: "ir",
                // 其他配置...
                after: () => {
                  this.contentEditor.setValue(this.tmpItem.content);
                  this.contentEditor.focus();
                },
              });
            });
          },
          isDisabled(item) {
            // 默认不可编辑，这个时候 没有disable属性
            return item["disable"] !== false;
          },
          sendData: function () {
            this.sendBtnAble = false;

            let content = this.contentStr;
            let categories = this.tagChecked;

            // 循环拼接类似  #tag #tag2 content
            let updatedContent = content;
            if (categories.length > 0) {
              // 循环拼接类似  #tag #tag2 content
              updatedContent =
                categories.map((tag) => `#${tag}`).join(" ") + " " + content;
            }
            // updatedContent 去除尾部的\n,可能有多个
            updatedContent = updatedContent.replace(/\n+$/, "");
            // updatedContent 最少有一个标签，如果没有就添加一个标签 #todo，检测是否有 #标签
            if (!updatedContent.includes("#")) {
              updatedContent = "#todo " + updatedContent;
            }

            let res = requestUtil.sync(
              "https://memos.tianyunperfect.cn/api/v1/memo",
              "post",
              {
                content: updatedContent,
                resourceIdList: this.tmpFileIds.map((it) => it.id),
              },
              myHeaders
            );
            if (res["name"]) {
              // window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
              this.msg("记录成功");
              localStorage.setItem("contentStr", "");
              this.contentStr = "";
              this.tmpFileIds = [];
              this.search();
            }
            this.sendBtnAble = true;
          },
          search: function () {
            document.documentElement.scrollTo(0, 0);

            console.log(this.tagChecked);

            let params = {
              search: this.searchStr,
              tag_str: this.tagChecked.join(","),
              page: this.page,
              page_size: this.size,
            };
            let url = "https://web_history.tianyunperfect.cn/memos/list";
            let urlWithParams = requestUtil.buildUrl(url, params);
            let res = requestUtil.sync(urlWithParams, "get", null, myHeaders);
            if (res.code !== 200) {
              return;
            }
            this.contentList = res.res;
            this.searchByContent();
          },
          getAllTags: function () {
            this.allTags = requestUtil
              .async(
                "https://memos.tianyunperfect.cn/api/v1/tag",
                "get",
                null,
                myHeaders
              )
              .then((res) => {
                this.allTags = res;
              });
          },
          confirmSubmit2() {
            res = requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/replace",
              "post",
              {
                old_text: this.old_text,
                new_text: this.new_text,
              },
              {}
            );
            if (res.code === 200) {
              this.msg("替换成功");
              this.search();
            }
            this.dialogVisible2 = false;
          },
          searchByContent: function () {
            this.resourceMap = {};
            // contentList 循环获取里面所有的id数组
            let idArr = this.contentList.map((item) => item["id"]);
            // 获取资源
            let ids = idArr.join(",");
            if (!ids) {
              return;
            }
            let sourceRes = requestUtil.sync(
              "https://web_history.tianyunperfect.cn/memos/resource",
              "post",
              { ids: ids },
              {}
            );
            // {'code': 200, 'res': [{'memo_id': 1, 'resource_name': 'EfdmvRsodBviDQWRmDiTaV'}]}
            // 循环遍历，以memo_id为key，resource_name数组为value
            sourceRes["res"].forEach((item) => {
              if (this.resourceMap[item["memo_id"]]) {
                this.resourceMap[item["memo_id"]].push(item);
              } else {
                this.resourceMap[item["memo_id"]] = [item];
              }
            });
          },
        },
      });

      // 如果处于编辑状态，则执行esc取消
      window.onkeydown = function (event) {
        let edit = vm.dialogVisible;
        if (!edit) {
          return;
        }
        // esc
        if (event.keyCode === 27) {
          vm.dialogVisible = false;
        }
        // 如果是meta + enter 则保存
        if (event.metaKey && event.keyCode === 13) {
          vm.confirmSubmit();
        }
        // 如果是ctrl + enter 则保存
        if (event.ctrlKey && event.keyCode === 13) {
          vm.confirmSubmit();
        }
      };
    </script>
  </body>
</html>