tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957
							<!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">
            <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)"
                    >删除</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>
          </div>
          <div>
            <el-input
              @paste.native="handlePaste2"
              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: {
          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.replace("#" + cTag + " ", "");
            // 提交记录
            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();
            }
          },
          del(item) {
            // 提醒是否删除
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              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 = this.contentList.filter(
                      (it) => it.id !== item.id
                    );
                  }
                });
            });
          },
          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.tmpItem.content,
                created_ts: this.tmpItem.created_ts,
                resourceIdList: this.cloneFileIds.map((it) => it.id),
              },
              {}
            );
            if (res.code === 200) {
              this.msg("更新成功");
              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.$refs.contentEdit.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+$/, "");

            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>