tianyunperfect
/
web-base--


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045
							<!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>
    <style>
      body {
        font-family: Lyon-Text, Georgia, "Songti SC", SimSun, serif;
      }

      .vditor-reset {
        font-family: Lyon-Text, Georgia, "Songti SC", SimSun, serif !important;
      }

      img {
        border: 1px solid #b7b6b6;
      }

      .img {
        border: 1px solid #b7b6b6;
        max-width: 200px;
        max-height: 200px;
        margin: 10px 10px 0 0 !important;
        cursor: pointer;
      }

      .editClass button {
        display: inline;
        /*margin-top: 5px;*/
        margin-left: 30px;
      }

      .contentLine div {
        margin: 5px 0 0;
      }

      .border {
        /*border: 1px solid #b7b6b6;*/
        border-radius: 5px;
        padding: 10px;
        background-color: white;
      }

      body {
        background-color: #f4f4f5;
      }

      .myTop {
        position: fixed;
        top: 0;
        background-image: url("./img/gray.png");
        /*    背景铺满整个div*/
        background-size: 100% 100%;
        width: 100%;
        padding: 10px;
        z-index: 100;
      }

      .myText {
        border: 1px solid #d2d2d2;
      }

      .vditor-reset {
        padding: 10px 20px !important;
      }

      .vditor-toolbar {
        display: none;
      }
    </style>
    <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>
    <!-- 引入Quill库 -->
    <!--<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>-->
    <!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
    <script>
      // if (getQueryString("id") !== "tianyunperfect") {
      //     // location.href = "http://127.0.0.1";
      // }

      let authStr =
        "bearer eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoidGlhbnl1bnBlcmZlY3QiLCJpc3MiOiJtZW1vcyIsInN1YiI6IjEiLCJhdWQiOlsidXNlci5hY2Nlc3MtdG9rZW4iXSwiaWF0IjoxNzA5MTc5NTUyfQ.LFxWB4efya1sL7VoJ42xpXxbAip-udT_Kx2OwZ8Y3-E";
      let myHeaders = {
        "Content-type": "application/json",
        Authorization: authStr,
      };

      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);
                // let ed = new Vditor(item.resource_name, {
                //     cdn: 'https://ld246.com/js/lib/vditor',
                //     // height: 360,
                //     toolbarConfig: {
                //         pin: true,
                //     },
                //     // preview: {
                //     //     theme:{
                //     //         path: ''
                //     //     }
                //     // },
                //     theme: 'classic',
                //     cache: {
                //         enable: false,
                //     },
                //     after: () => {
                //         ed.setValue(item.content)
                //     },
                // })
              });
            });
          },
        },
        mounted() {
          if (!checkLogin()) {
            return;
          }
          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': 4, 'resource_name': '2rY5kmn3AHsy23vK4vSskV'}, {'memo_id': 7, 'resource_name': 'FMhzJXjoTa7fdtbbCBjXnt'}]}
            // 循环遍历，以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>