feat: v1.2.1 布局优化

Author: Flex-7746

README.md

@@ -4,7 +4,7 @@
 
 显示名称：代码编辑器
 
-版本：1.2.0
+版本：1.2.1
 
 发布者：Flex_7746
 

app/manifest

@@ -1,5 +1,5 @@
 appname=code.editor
-version=1.2.0
+version=1.2.1
 desc=`<div>VS Code 同源库，支持多种编码文件的操作，更有语法高亮、代码补全。</div>
 <div>text、txt、js、ts、html、htm、css、scss、less、json、md、py、java、c、cpp、cc、cxx、go、rs、php、rb、sh、sql、xml、yaml、yml、vue 后缀文件直接双击文件或右键选择代码编辑器打开。</div><div>非上述后缀文件，右键【详细信息】-【复制原始路径】，点击桌面图标访问后粘贴路径打开。</div>
 <div>提示：编辑用户目录中的文件需【系统设置】-【应用】-【代码编辑器】进行文件夹授权，应用文件夹中目录下可直接编辑；</div><div>提示：移动端暂未做 UI 适配，访问可能布局错乱；访问二进制文件将显示乱码，请谨慎操作。</div>`

code.editor.fpk

@@ -14,6 +14,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -29,6 +30,7 @@ declare module 'vue' {
 declare global {
   const ElButton: typeof import('element-plus/es')['ElButton']
   const ElDialog: typeof import('element-plus/es')['ElDialog']
+  const ElIcon: typeof import('element-plus/es')['ElIcon']
   const ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
   const ElOption: typeof import('element-plus/es')['ElOption']
   const ElSelect: typeof import('element-plus/es')['ElSelect']

frontend/components.d.ts

@@ -1,28 +1,41 @@
 <template>
-  <el-tabs
-    class="view"
-    v-model="active"
-    type="card"
-    addable
-    :closable="view.length > 1"
-    @edit="viewEdit"
-  >
-    <el-tab-pane v-for="item in view" :key="item.path" :name="item.path">
+  <el-tabs class="view" v-model="active" type="card" closable @tab-remove="remove">
+    <el-tab-pane v-for="(item, i) in view" :key="item.path" :name="i">
       <template #label>
         <el-tooltip :content="item.path">
-          <div class="label" :class="item.diff ? 'diff' : ''">{{ item.path.split('/').pop() }}</div>
+          <div>{{ item.path.split('/').pop() }}</div>
         </el-tooltip>
+
+        <div v-show="item.diff" class="diff"></div>
       </template>
 
       <MonacoEditor
+        ref="editorRef"
         :path="item.path"
         :like="like"
         @like="() => (open = !open)"
         @diff="(v) => (item.diff = v)"
       />
     </el-tab-pane>
+
+    <el-tab-pane :name="-1" disabled>
+      <template #label>
+        <div class="add" @click="add()">
+          <el-icon><Plus /></el-icon>
+        </div>
+      </template>
+    </el-tab-pane>
   </el-tabs>
 
+  <el-button
+    size="small"
+    class="save"
+    v-bind="view?.[active]?.diff ? { type: 'primary' } : { disabled: true }"
+    @click="editorRef?.[active]?.save"
+  >
+    保存
+  </el-button>
+
   <el-dialog v-model="open" title="偏好设置" width="300">
     <div class="like-dialog">
       <div class="item">
@@ -67,6 +80,9 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+
 import MonacoEditor from './components/MonacoEditor.vue'
 
 import { THEME_OPTIONS } from '@/utils/option'
@@ -77,13 +93,7 @@ import usePath from '@/hooks/usePath'
 const { open, like, resetLike } = useLike()
 const { view, active, add, remove } = usePath()
 
-const viewEdit = (v: string, action: 'remove' | 'add') => {
-  if (action === 'add') {
-    add()
-  } else {
-    remove(v)
-  }
-}
+const editorRef = ref<any[]>([])
 </script>
 
 <style lang="scss">
@@ -104,25 +114,38 @@ body,
       margin: 0;
 
       .el-tabs__nav {
-        border-top: none;
         border-radius: 0;
 
         .el-tabs__item {
-          .label {
-            &::after {
-              content: '';
-              display: inline-block;
-              width: 8px;
-              height: 8px;
-              border-radius: 50%;
-              margin-left: 4px;
+          position: relative;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          &.is-disabled {
+            > .add {
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 100%;
+              height: 100%;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              cursor: pointer;
+              pointer-events: all;
             }
+          }
 
-            &.diff {
-              &::after {
-                background-color: var(--el-text-color-placeholder);
-              }
-            }
+          .diff {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background-color: var(--el-text-color-placeholder);
+          }
+
+          > * {
+            margin: 0;
           }
         }
       }
@@ -144,6 +167,12 @@ body,
       }
     }
   }
+
+  > .save {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+  }
 }
 
 .like-dialog {

frontend/src/App.vue

@@ -3,13 +3,12 @@ import { onMounted, reactive, ref } from 'vue'
 
 export default function usePath() {
   const view = reactive<{ path: string; diff: boolean }[]>([])
-  const active = ref('')
+  const active = ref(0)
 
   onMounted(async () => {
     const query = new URLSearchParams(window.location.search).get('path') || ''
     if (query) {
       view.push({ path: query, diff: false })
-      active.value = query
     } else {
       add(true)
     }
@@ -33,18 +32,16 @@ export default function usePath() {
       .catch(() => '')
 
     if (value) {
-      const item = view.find((i) => i.path === value)
-      if (item) {
-        active.value = item.path
+      const index = view.findIndex((i) => i.path === value)
+      if (index > -1) {
+        active.value = index
       } else {
-        view.push({ path: value, diff: false })
-        active.value = value
+        active.value = view.push({ path: value, diff: false }) - 1
       }
     }
   }
 
-  const remove = async (path: string) => {
-    const index = view.findIndex((i) => i.path === path)
+  const remove = async (index: number) => {
     const item = view[index]
     if (item) {
       if (item.diff) {
@@ -59,8 +56,10 @@ export default function usePath() {
         }
       }
 
-      if (active.value === item.path) {
-        active.value = (view[index + 1] || view[index - 1])?.path || ''
+      if (index === active.value) {
+        active.value += view[index + 1] ? 0 : -1
+      } else if (index < active.value) {
+        active.value--
       }
 
       view.splice(index, 1)