tianyunperfect
/
web-base--


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055
							<!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" class="main">
        <div class="myTop">
            <div class="main">
                <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: 20%; padding-left: 10px"
                        placeholder="关键字"
                        v-model="searchStr"
                        @change="searchStrChange"
                ></el-input>
                <el-input
                        style="margin-left: 30px; width: 30%; padding-left: 10px"
                        placeholder="AI 问答"
                        v-model="searchStr2"
                        @change="searchStrChange2"
                ></el-input>
                <br/><br/>
                <div></div>
                <div style="display: flex; align-items: stretch; width: 90%">
                    <!-- 创建一个用于编辑的容器 -->
                    <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"
                            :disabled="selectedIds.length<=1"
                    >合并
                    </el-button
                    >
                    <div
                            @click="dialogVisible2=true"
                            style="font-size: 0.3em; margin-left: 10px;margin-top: 10px"
                    >
                        替换
                    </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; display: flex;align-items: center">
                        <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>

        <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">
                            <!--                  日期字符串-->
                            <div style="font-family: ui-sans-serif, system-ui; display: flex;align-items: center;color: grey;font-size: 0.9em">
                                {{ item.created_ts.replace('T', ' ')}}
                            </div>
                            <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="5" style="display: flex; justify-content: flex-end">
                        <div style="display: flex; flex-direction: column; gap: 8px">
                            <el-button
                                    size="mini"
                                    type="info"
                                    icon="el-icon-link"
                                    @click="window.open('https://memos.tianyunperfect.cn/m/' + item.resource_name)"
                                    style="width: 80px"
                            >跳转
                            </el-button>

                            <el-button
                                    size="mini"
                                    type="info"
                                    icon="el-icon-folder-opened"
                                    @click="archive(item)"
                                    style="width: 80px; margin-left: 0"
                            >归档
                            </el-button>

                            <el-button
                                    size="mini"
                                    :type="item.pendingDelete ? 'success' : 'danger'"
                                    :icon="item.pendingDelete ? 'el-icon-refresh' : 'el-icon-delete'"
                                    @click="del(item)"
                                    style="width: 80px; margin-left: 0"
                            >
                                {{ item.pendingDelete ? `(${item.countdown}s)` : '删除' }}
                            </el-button>


                        </div>
                        <el-checkbox
                                :value="selectedIds.includes(item.id)"
                                @change="handleCheckboxChange(item.id, $event)"
                                style="margin-top: 6px; margin-left: 20px"
                        >合并
                        </el-checkbox>
                    </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: {
            highlightHashTags(element) {
                // 获取目标元素
                if (!element) return;

                // 使用正则表达式匹配所有以#开头的标签
                const regex = /#(\S+)/g; // 匹配#后跟非空格字符的组合

                // 替换匹配项为带样式的span元素
                element.innerHTML = element.innerHTML.replace(regex,
                    '<span style="color: #679fe0;">$&</span>'
                );
            },
            resetView(item) {
                let elementById = document.getElementById(item.resource_name);
                Vditor.preview(
                    elementById,
                    item.content,
                    {
                        cdn: "https://ld246.com/js/lib/vditor",
                        speech: {
                            enable: false,
                        },
                        anchor: 1,
                        after() {
                            vm.highlightHashTags(document.getElementById(item.resource_name));
                        },
                    },
                );
                // elementById 的html里面，如果有文本是  #文本 的话，就替换给加一个颜色

            },
            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) || (item.content.endsWith("#" + tag));
            },
            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) {
            // 如果是右箭头，则翻页
            if (event.keyCode === 39) {
                vm.page++;
                // 提示翻页
                vm.$message({
                    message: "翻页",
                    type: "success",
                });
            }
            // 如果是左箭头，则翻页
            if (event.keyCode === 37 && vm.page > 1) {
                vm.page--;
                vm.$message({
                    message: "翻页",
                    type: "success",
                });
            }

            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>