cyber/src/pages/accountPages/Account_admin_uploadLog.vue

<script setup>

import {onMounted, onUnmounted, ref} from "vue";
import MarkdownViewer from "../../components/mdRenderer.vue";
import swal from "../../utils/sweetalert.js";
import store from "../../store/index.js";
import api from "../../utils/axios.js";
import getCurrentTime from "../../utils/getCurrentTime.js";

const mdInput = ref(store.state.editStore.log || '');
const version = ref(store.state.editStore.logVersion || '');
const isViewing = ref(false);
const isNailed = ref(false);

const funcButtons = ref([
  {name: 'h1', func: '# [cur]'},
  {name: 'h2', func: '## [cur]'},
  {name: 'h3', func: '### [cur]'},
  {name: '<s>abc</s>', func: '~~[cur]~~'},
  {name: '<b>abc</b>', func: '**[cur]**'},
  {name: '<i>abc</i>', func: '*[cur]*'},
  {name: '<code>abc</code>', func: '\`[cur]\`'},
  {name: '●', func: '- '},
  {name: 'url', func: '[[cur]](https://example.com)'},
  {name: 'img', func: '![图片说明](https://example.com/img1.png)'},
])

function clickFuncBtn(func) {
  const textarea = document.querySelector('textarea'); // 获取 textarea 元素
  const startPos = textarea.selectionStart; // 获取焦点的起始位置
  const endPos = textarea.selectionEnd; // 获取焦点的结束位置
  const selectedText = textarea.value.slice(startPos, endPos); // 获取选中的文本

  let newText = '';

  if (selectedText) {
    // 如果选中了文本，就应用格式化
    newText = func.replace('[cur]', selectedText);
  } else {
    // 如果没有选中文本，就插入占位符文本
    newText = func.replace('[cur]', '请在此填写内容');
  }

  // 插入格式化后的文本到 textarea
  textarea.setRangeText(newText, startPos, endPos, 'select'); // 替换选中的文本

  // 更新 mdInput 以反映最新的文本内容
  mdInput.value = textarea.value;

  // 找到 `[cur]` 的位置
  const curPos = textarea.value.indexOf('[cur]');

  // 重新设置光标位置到 `[cur]` 处
  textarea.selectionStart = curPos;
  textarea.selectionEnd = curPos;

  // 重新设置焦点
  textarea.focus();
}

const postLog = async () => {
  if (version.value.trim().length === 0) {
    swal.tip('info', '版本号为必填项');
    return;
  }
  if (mdInput.value.trim().length === 0) {
    swal.tip('info', '内容为必填项');
    return;
  }
  const result = await swal.window('info', '提交吗? ', '提交前请检查内容, 确保格式正确', '确定', '取消');
  if (result.isConfirmed) {
    const response = await api.post('/postweblog', {
      version: version.value,
      date: getCurrentTime(),
      content: mdInput.value
    });
    if (response.code === 0) {
      swal.tip('success', '提交成功');
      return;
    }
    swal.tip('error', '提交失败...')
  }
}

const shiftNailed = () => {
  isNailed.value = isNailed.value !== true;
}
const saveDocument = () => {
  store.commit('saveEdit', {log: mdInput.value, logVersion: version.value})
  swal.tip('success', '保存成功')
};

const handleKeydown = (event) => {
  // 检查是否按下了 Ctrl + S
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault(); // 阻止浏览器默认的保存行为
    saveDocument(); // 调用保存函数
  }
};

// 监听全局键盘事件
onMounted(() => {
  window.addEventListener('keydown', handleKeydown);
});

// 在组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown);
});
</script>

<template>
  <div class="container">
    <div class="top">
      <button class="view-btn" :class="{viewing: isViewing, nailed: isNailed===true}"
              @mouseenter="isViewing = true"
              @mouseleave="isViewing = isNailed === true"
              @click="shiftNailed"
      >{{ isViewing ? isNailed ? '解除' : '固定' : '预览' }}

      </button>
      <div class="function-btn">
        <button v-for="btn in funcButtons" v-html="btn.name" @click="clickFuncBtn(btn.func)"/>
      </div>
      <div class="top-right">
        <button class="view-btn" @click="saveDocument">保存</button>
        <button class="view-btn" @click="postLog">上传</button>
      </div>

    </div>
    <div class="middle">
      <div class="input-area" v-if="!isViewing">
        <input v-model="version" placeholder="版本号" style="height: 20px; flex: none"></input>
        <textarea v-model="mdInput" placeholder="ctrl+s 保存;
选中文本按功能按钮"></textarea>
      </div>
      <div class="output-area" v-else>
        <MarkdownViewer :markdownContent="mdInput"/>
      </div>

    </div>
  </div>


</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #f5f6f7;
  padding: 0;
  animation: fadeIn 0.3s ease-in-out;
}

.theme-light .container {
  color: #333333;
}

.top {
  width: calc(100% - 35px);
  height: 28px;
  border-radius: 10px 10px 0 0;
  background: #2d2d2d;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
}

.theme-light .top {
  background: #e0e0e0;
}

.function-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  width: 70%;
}


button {
  color: white;
  background: #363636;
  border: #007bff solid 2px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  overflow: hidden;
}

.theme-light button {
  color: black;
  background: white;
  border: #ffb74d solid 2px;
}
.top-right {
  width: auto;
  display: flex;
  flex-direction: row;
  gap: 1vw;
}

.view-btn {
  color: white;
  background: #363636;
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.viewing {
  background: #004286;
}

.viewing.nailed {
  background: #007bff;
}

.theme-light .viewing {
  background: #ffdfad;
}

.theme-light .viewing.nailed {
  background: #ffb74d;
}

.middle {
  flex: 1;
  width: calc(100% - 35px);
  background: #c09d15;
  padding: 10px;
  display: flex;
  flex-direction: column;
  //align-items: center;
  background: rgba(128, 128, 128, 0.1);
}

.input-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 5px;
}

.middle .input-area textarea, .middle .input-area input {
  flex: 1;
  resize: none;
  background: #1a1a1a;
  color: white;
  //border: gray solid 1px;
}

.theme-light .input-area textarea,.theme-light .middle .input-area input {
  background: white;
  color: black;
}

.output-area {
  border: gray solid 1px;
  background: #212121;
  height: calc(100vh - 165px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  overflow-y: auto;
}

.theme-light .output-area {
  background: white;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>