From 996f30b5842ad8cba4477f7ede1476f7ded2264b Mon Sep 17 00:00:00 2001
From: coutinho <609127295@qq.com>
Date: Wed, 6 Aug 2025 16:53:21 +0800
Subject: [PATCH 1/2] chore: Improve style

---
 packages/devtools-vite/src/app/styles/splitpanes.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/devtools-vite/src/app/styles/splitpanes.css b/packages/devtools-vite/src/app/styles/splitpanes.css
index b94bb80e..c6c73901 100644
--- a/packages/devtools-vite/src/app/styles/splitpanes.css
+++ b/packages/devtools-vite/src/app/styles/splitpanes.css
@@ -27,20 +27,27 @@
 
 .splitpanes--vertical>.splitpanes__splitter {
   width: 0 !important;
+  min-width: 0 !important;
 }
 
 .splitpanes--horizontal>.splitpanes__splitter {
   height: 0 !important;
+  min-height: 0 !important;
 }
 
 .splitpanes--vertical>.splitpanes__splitter:before {
   left: -5px;
-  right: -4px;
+  right: -5px;
   height: 100%;
 }
 
 .splitpanes--horizontal>.splitpanes__splitter:before {
   top: -5px;
-  bottom: -4px;
+  bottom: -5px;
   width: 100%;
 }
+
+.splitpanes__pane[style*="display: none"]+.splitpanes__splitter,
+.splitpanes__pane[hidden]+.splitpanes__splitter {
+  display: none;
+}

From d62527e17b929b3f37ab8704981fffe1ff7e9c87 Mon Sep 17 00:00:00 2001
From: coutinho <609127295@qq.com>
Date: Mon, 11 Aug 2025 10:35:30 +0800
Subject: [PATCH 2/2] feat: Add code Viewer.vue

---
 .../src/app/components/code/Viewer.vue        | 36 +++++++++++++++++++
 .../src/app/components/data/AssetDetails.vue  |  7 ++--
 2 files changed, 38 insertions(+), 5 deletions(-)
 create mode 100644 packages/devtools-vite/src/app/components/code/Viewer.vue

diff --git a/packages/devtools-vite/src/app/components/code/Viewer.vue b/packages/devtools-vite/src/app/components/code/Viewer.vue
new file mode 100644
index 00000000..cdd96ec7
--- /dev/null
+++ b/packages/devtools-vite/src/app/components/code/Viewer.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type CodeMirror from 'codemirror'
+import { onMounted, toRefs, useTemplateRef, watchEffect } from 'vue'
+import { useCodeMirror } from '~/composables/codemirror'
+import { settings } from '~/state/settings'
+
+const props = defineProps<{
+  code: string
+}
+>()
+
+const { code } = toRefs(props)
+
+let cm: CodeMirror.Editor
+
+const codeEl = useTemplateRef('codeEl')
+
+onMounted(() => {
+  cm = useCodeMirror(
+    codeEl,
+    code,
+    {
+      mode: 'javascript',
+      readOnly: true,
+      lineNumbers: true,
+    },
+  )
+  watchEffect(() => {
+    cm.setOption('lineWrapping', settings.value.codeviewerLineWrap)
+  })
+})
+</script>
+
+<template>
+  <div ref="codeEl" />
+</template>
diff --git a/packages/devtools-vite/src/app/components/data/AssetDetails.vue b/packages/devtools-vite/src/app/components/data/AssetDetails.vue
index bb96140e..dee86828 100644
--- a/packages/devtools-vite/src/app/components/data/AssetDetails.vue
+++ b/packages/devtools-vite/src/app/components/data/AssetDetails.vue
@@ -85,11 +85,8 @@ function openInEditor() {
         <DisplayCloseButton @click="showSource = false" />
       </div>
       <div class="w-full of-auto px2 py1" border="~ base rounded-lg">
-        <CodeDiffEditor
-          :from="asset.content!"
-          :to="asset.content!"
-          :diff="false"
-          :one-column="true"
+        <CodeViewer
+          :code="asset.content!"
         />
       </div>
     </template>