feat: 添加右侧工具栏

src/components/NavMenu.vue

@@ -111,6 +111,16 @@
         <ArrowRight />
         <ArrowRight />
       </el-icon>
       </el-icon>
     </div>
     </div>
+    <!-- 右侧工具栏 -->
+    <div class="tool_warper">
+      <div
+        title="格式工具"
+        style="cursor: pointer"
+        @click="formatDrawer = true"
+      >
+        <img src="../assets/images/brush-no.png" width="24" height="24" />
+      </div>
+    </div>
   </div>
   </div>
   <el-dialog
   <el-dialog
     v-model="dialogVisible"
     v-model="dialogVisible"
@@ -157,6 +167,45 @@
       </span>
       </span>
     </template>
     </template>
   </el-dialog>
   </el-dialog>
+  <span>
+    <el-drawer
+      v-model="formatDrawer"
+      class="format-drawer"
+      title="格式工具"
+      direction="rtl"
+      size="45%"
+    >
+      <el-input
+        v-model="textareaT"
+        style="width: 100%"
+        :rows="10"
+        type="textarea"
+        placeholder="请输入"
+        @input="confimTools"
+      />
+      <div
+        style="
+          margin-top: 10px;
+          height: 250px;
+          overflow: auto;
+          border: 1px solid #ddd;
+          padding: 10px;
+        "
+      >
+        {{ newTextareaT }}
+      </div>
+      <template #footer>
+        <span style="display: flex; justify-content: center">
+          <el-button size="medium" @click="formatDrawer = false">
+            取 消
+          </el-button>
+          <el-button size="medium" type="primary" @click="copy">
+            拷 贝
+          </el-button>
+        </span>
+      </template>
+    </el-drawer>
+  </span>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import {
 import {
@@ -205,6 +254,9 @@ const menuList = reactive(Menu)
 const userStore = userUserStore()
 const userStore = userUserStore()
 const userInfo = userStore.user
 const userInfo = userStore.user
 const dialogVisible = ref(false)
 const dialogVisible = ref(false)
+const formatDrawer = ref(false)
+const textareaT = ref('')
+const newTextareaT = ref('')
 // 密码form
 // 密码form
 const [passwordForm, resetPasswordForm] = useValue<PasswordForm>(
 const [passwordForm, resetPasswordForm] = useValue<PasswordForm>(
   {} as PasswordForm,
   {} as PasswordForm,
@@ -396,6 +448,43 @@ const ensureActiveTabVisible = () => {
   })
   })
 }
 }
 
 
+// 格式工具输入
+const confimTools = (v: string) => {
+  // 先处理结尾的多个空格，只保留一个
+  let text = v.replace(/\s+$/, ' ')
+
+  // 处理开头的多个空格，只保留一个
+  text = text.replace(/^\s+/, ' ')
+
+  // 将多个连续空格替换为单个空格
+  text = text.replace(/\s+/g, ' ')
+
+  // 然后将所有空格和换行符替换为逗号
+  text = text.replace(/(\s|[\r\n])/g, ',')
+
+  // 如果结尾是逗号，则删除
+  if (text.slice(-1) === ',') {
+    newTextareaT.value = text.slice(0, -1)
+  } else {
+    newTextareaT.value = text
+  }
+}
+
+const copy = () => {
+  const oInput = document.createElement('input')
+  oInput.value = newTextareaT.value
+  document.body.appendChild(oInput)
+  oInput.select() // 选择对象
+  document.execCommand('Copy') // 执行浏览器复制命令
+  oInput.className = 'oInput'
+  oInput.style.display = 'none'
+  document.body.removeChild(oInput)
+  ElMessage({
+    message: '复制成功',
+    type: 'success',
+  })
+}
+
 // 监听路由变化，自动添加标签
 // 监听路由变化，自动添加标签
 watch(
 watch(
   () => route.path,
   () => route.path,
@@ -537,4 +626,24 @@ onUnmounted(() => {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
 }
 }
+
+.tool_warper {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  bottom: 0;
+  width: 40px;
+  background: #001529;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+::v-deep(.el-drawer.rtl) {
+  height: 80% !important;
+  top: 15%;
+  right: 40px;
+}
 </style>
 </style>

src/views/Home.vue

@@ -20,7 +20,7 @@ import NavMenu from '@/components/NavMenu.vue'
 
 
 .container {
 .container {
   flex: 1;
   flex: 1;
-  padding: 0 10px 10px;
+  padding: 0 50px 10px 10px;
   background-color: #f6f6f6;
   background-color: #f6f6f6;
   overflow: hidden;
   overflow: hidden;
 }
 }