全屏编辑?

sub-store-org · Mar 19, 2024 · 8179ef3 · 8179ef3
1 parent 487b62b
commit 8179ef3
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.190",
+  "version": "2.14.191",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/views/FileEditor.vue b/src/views/FileEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-wrapper">
+  <div v-if="isDis" class="page-wrapper">
     <!-- 基础表单 -->
     <div class="form-block-wrapper">
       <nut-form class="form" :model-value="form" ref="ruleForm">
@@ -107,8 +107,14 @@
             :placeholder="$t(`filePage.content.placeholder`)"
             type="text"
           /> -->
-          <div style="margin-left: -10px; margin-right: -20px">
-            <cmView :isReadOnly="false" id="FileEditer"/>
+
+          <button class="cimg-button" @click="isDis = false">
+            <img src="" />
+            全屏编辑
+            <!-- 测试 后续再改效果 -->
+          </button>
+          <div style="margin-left: -10px; margin-right: -20px;max-height: 60vh;overflow: auto;">
+            <cmView :isReadOnly="false" id="FileEditer" />
           </div>
         </nut-form-item>
         <!-- ua -->
@@ -163,6 +169,13 @@
     />
   </div>
 
+  <div v-else style="width: 100%">
+    <button class="cimg-button" style="opacity: .5;" @click="isDis = true">
+      <img src="" />
+      取消全屏
+    </button>
+    <cmView :isReadOnly="false" id="FileEditer" />
+  </div>
   <div class="bottom-btn-wrapper">
     <nut-button @click="compare" class="compare-btn btn" plain shape="square">
       <font-awesome-icon icon="fa-solid fa-eye" />
@@ -217,7 +230,7 @@ import { useRoute, useRouter } from "vue-router";
 import cmView from "@/views/editCode/cmView.vue";
 import { useCodeStore } from "@/store/codeStore";
 const cmStore = useCodeStore();
-
+const isDis = ref(true);
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
@@ -233,7 +246,6 @@ const padding = bottomSafeArea.value + "px";
 
 let scrollTop = 0;
 
-
 const file = computed(() => subsStore.getOneFile(configName));
 const filePreviewIsVisible = ref(false);
 usePopupRoute(filePreviewIsVisible);
@@ -255,7 +267,7 @@ provide("form", form);
 const ignoreList = ["Quick Setting Operator"];
 
 watch(
-  () => cmStore.EditCode['FileEditer'],
+  () => cmStore.EditCode["FileEditer"],
   (newCode) => {
     form.content = newCode;
   }
@@ -264,8 +276,8 @@ watch(
 watchEffect(() => {
   if (isInit.value) return;
   if (configName === "UNTITLED") {
-    const fc = "// " + t(`filePage.content.placeholder`) + "\n"
-    cmStore.setEditCode('FileEditer', fc)
+    const fc = "// " + t(`filePage.content.placeholder`) + "\n";
+    cmStore.setEditCode("FileEditer", fc);
     // 标记 加载完成
     isInit.value = true;
     return;
@@ -284,7 +296,7 @@ watchEffect(() => {
     form.ua = sourceData.ua;
     form.mergeSources = sourceData.mergeSources;
     form.content = sourceData.content;
-    cmStore.setEditCode('FileEditer', sourceData.content);
+    cmStore.setEditCode("FileEditer", sourceData.content);
     form.ignoreFailedRemoteFile = sourceData.ignoreFailedRemoteFile;
     const newProcess = JSON.parse(JSON.stringify(sourceData.process));
     form.process = newProcess;

diff --git a/src/views/editCode/cmView.vue b/src/views/editCode/cmView.vue
@@ -372,7 +372,7 @@ const pasteNav = async () => {
   display: flex;
   padding-top: 10px;
   z-index: 10;
-  min-height: 24px;
+  height: 32px;
   width: 98%;
   justify-content: flex-end;
   img {
@@ -391,7 +391,18 @@ const pasteNav = async () => {
   width: 33px;
   transition: transform 0.2s;
 }
-
+.cimg-button  {
+  // width: 33px;
+  height: 16px;
+  font-size: 12px;
+  background-repeat: no-repeat;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 10px;
+  margin-top: 8px;
+}
 .cm-img-button button:hover {
   transform: scale(0.9);
 }