From f1b701d045b51bae9fa908ab4a2139dad37c3218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E4=BA=89=E9=B8=A3?=
 <yanzhengming@yanzhengmingdeMacBook-Pro.local>
Date: Mon, 9 Dec 2024 17:59:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=8D=A1=E7=89=87=E8=B7=B3?=
 =?UTF-8?q?=E8=BD=AC=E7=BC=96=E8=BE=91=E4=BB=A3=E7=A0=81=E6=96=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  1 +
 src/App.vue                                   | 27 +++++----
 src/assets/base.css                           |  2 +-
 src/views/Layout/components/Menu.tsx          |  7 +--
 src/views/Layout/index.tsx                    | 55 +++++++++++--------
 .../Sandpack/components/HeaderOperate.tsx     | 33 +++++++++++
 src/views/Sandpack/index.tsx                  | 40 ++++++++------
 vite.config.ts                                |  8 ++-
 8 files changed, 114 insertions(+), 59 deletions(-)
 create mode 100644 src/views/Sandpack/components/HeaderOperate.tsx

diff --git a/components.d.ts b/components.d.ts
index 04f01ce..854346b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     IconVue: typeof import('./src/components/icons/IconVue.vue')['default']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index de00db8..7aeded9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
-import LayoutCom from "./views/Layout";
+// import { RouterView } from 'vue-router'
+import LayoutCom from './views/Layout'
+import { zhCN, dateZhCN } from 'naive-ui'
 </script>
 
 <template>
-  <div class="p-5 w-h-full">
-  <LayoutCom>
-    <!-- <RouterView /> -->
-  </LayoutCom>
-  </div>
-
+  <n-config-provider
+    :theme-overrides="themeOverrides"
+    class="h-full w-full"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+  >
+    <div class="p-5 w-h-full">
+      <LayoutCom>
+        <!-- <RouterView /> -->
+      </LayoutCom>
+    </div>
+  </n-config-provider>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/assets/base.css b/src/assets/base.css
index c001975..f4ac3b6 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -66,7 +66,7 @@
 body {
   min-height: 100vh;
   color: var(--color-text);
-  background: var(--color-background);
+  background: var(--color-background-mute);
   transition:
     color 0.5s,
     background-color 0.5s;
diff --git a/src/views/Layout/components/Menu.tsx b/src/views/Layout/components/Menu.tsx
index 8cd7da1..0f7a425 100644
--- a/src/views/Layout/components/Menu.tsx
+++ b/src/views/Layout/components/Menu.tsx
@@ -5,6 +5,7 @@ import { BookmarkOutline, CaretDownOutline } from '@vicons/ionicons5'
 import IconCesium from '@/components/icons/IconCesium.vue'
 import IconVue from '@/components/icons/IconVue.vue'
 import IconHtml from '@/components/icons/IconHtml.vue'
+
 const menuOptions: MenuOption[] = [
   {
     label: 'Cesium',
@@ -47,11 +48,7 @@ const renderMenuLabel = (option: MenuOption) => {
 }
 
 const renderMenuIcon = (option: MenuOption) => {
-  if ('icon' in option) {
-    return h(NIcon, null, option.icon)
-  } else {
-    return h(NIcon, null, { default: () => h(option.icon ? option.icon : BookmarkOutline) })
-  }
+  return h(NIcon, null, { default: () => h(option.icon ?? BookmarkOutline) })
 }
 
 const expandIcon = () => {
diff --git a/src/views/Layout/index.tsx b/src/views/Layout/index.tsx
index 5df3b25..3b9a1fd 100644
--- a/src/views/Layout/index.tsx
+++ b/src/views/Layout/index.tsx
@@ -8,8 +8,10 @@ import {
   NScrollbar,
 } from 'naive-ui'
 import MenuCom from './components/Menu'
+//
+const border = 'border border-[var(--border-color)] rounded-lg '
+const bgColor = 'bg-[var(--color-background-mute)] '
 
-const border = 'border border-[var(--border-color)] rounded-lg shadow-sm'
 export default defineComponent({
   setup() {
     const route = useRoute()
@@ -19,29 +21,36 @@ export default defineComponent({
         <RouterView></RouterView>
       ) : (
         <div class="w-h-full">
-          <NLayout class="w-h-full" content-class="flex flex-col w-h-full">
-            <NLayoutHeader class="h-12">
-              <div class={`h-full ${border}`}>title</div>
-            </NLayoutHeader>
-            <div class="h-5"></div>
+          <NLayout class={`w-h-full ${bgColor}`} content-class="flex flex-col w-h-full">
+            <div class={`${bgColor}`}>
+              <NLayoutHeader class={`h-[64px] ${border}`}>
+                <div class="h-full">title</div>
+              </NLayoutHeader>
+            </div>
+            <div class={`h-5 ${bgColor}`}></div>
             <NLayout has-sider class="flex-1" content-class="w-h-full">
-              <NLayoutSider
-                class={`${border}`}
-                show-trigger
-                collapse-mode="width"
-                collapsed-width={64}
-                width={240}
-                content-class="w-h-full"
-                native-scrollbar={false}
-              >
-                <MenuCom />
-              </NLayoutSider>
-              <div class="p-3"></div>
-              <NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
-                <NScrollbar>
-                  <RouterView class="w-h-full" />
-                </NScrollbar>
-              </NLayoutContent>
+              <div class={`${bgColor} h-full`}>
+                <NLayoutSider
+                  class={`${border} h-full`}
+                  show-trigger
+                  collapse-mode="width"
+                  collapsed-width={64}
+                  width={240}
+                  content-class="w-h-full"
+                  native-scrollbar={false}
+                >
+                  <MenuCom />
+                </NLayoutSider>
+              </div>
+
+              <div class={`p-3 ${bgColor}`}></div>
+              <div class={`${bgColor} h-full`}>
+                <NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
+                  <NScrollbar>
+                    <RouterView class="w-h-full" />
+                  </NScrollbar>
+                </NLayoutContent>
+              </div>
             </NLayout>
             {/* <NLayoutFooter class="bg-slate-400 h-[40px]">成府路</NLayoutFooter> */}
           </NLayout>
diff --git a/src/views/Sandpack/components/HeaderOperate.tsx b/src/views/Sandpack/components/HeaderOperate.tsx
new file mode 100644
index 0000000..ed8f537
--- /dev/null
+++ b/src/views/Sandpack/components/HeaderOperate.tsx
@@ -0,0 +1,33 @@
+import { NButton, NSelect } from 'naive-ui'
+
+const options = [
+  {
+    label: 'static',
+    value: 'static',
+  },
+  {
+    label: 'vue3',
+    value: 'vue3',
+  },
+  {
+    label: 'react',
+    value: 'react',
+  },
+]
+
+export default defineComponent({
+  setup() {
+    const type = ref('static')
+    return () => (
+      <div class="flex gap-2 h-[64px] justify-center items-center bg-white border border-[var(--border-color)] rounded-lg p-5">
+        <NSelect class="w-[200px]" options={options} v-model:value={type.value}></NSelect>
+        <NButton type="primary" class="">
+          运行
+        </NButton>
+        <NButton type="primary" class="ml-auto">
+          保存
+        </NButton>
+      </div>
+    )
+  },
+})
diff --git a/src/views/Sandpack/index.tsx b/src/views/Sandpack/index.tsx
index b6cd1b4..dc034d4 100644
--- a/src/views/Sandpack/index.tsx
+++ b/src/views/Sandpack/index.tsx
@@ -6,36 +6,40 @@ import {
 } from 'sandpack-vue3'
 import { atomDark } from '@codesandbox/sandpack-themes'
 import CodeEditor from './components/CodeEditor'
+import HeaderOperate from './components/HeaderOperate'
 
 export default defineComponent({
   setup() {
     return () => (
-      <>
-        <SandpackProvider
-          class="!w-h-full"
-          theme={atomDark}
-          template="static"
-          option={{
-            showConsole: true,
-          }}
-        >
-          <SandpackLayout class="w-h-full">
-            <SandpackFileExplorer class="!h-full" />
-            {/* <SandpackCodeEditor
+      <div class="w-h-full flex-col flex gap-5">
+        <HeaderOperate />
+        <div class="flex-1">
+          <SandpackProvider
+            class="!w-h-full"
+            theme={atomDark}
+            template="static"
+            option={{
+              showConsole: true,
+            }}
+          >
+            <SandpackLayout class="w-h-full">
+              <SandpackFileExplorer class="!h-full" />
+              {/* <SandpackCodeEditor
               class="!h-full"
               ref={codemirrorInstance}
               showTabs
               showLineNumbers={true}
               showInlineErrors={false}
             /> */}
-            <CodeEditor />
-            <SandpackPreview class="!h-full" />
-          </SandpackLayout>
-          {/* <SandpackLayout>
+              <CodeEditor />
+              <SandpackPreview class="!h-full" />
+            </SandpackLayout>
+            {/* <SandpackLayout>
           <SandpackConsole />
           </SandpackLayout> */}
-        </SandpackProvider>
-      </>
+          </SandpackProvider>
+        </div>
+      </div>
     )
   },
 })
diff --git a/vite.config.ts b/vite.config.ts
index 6b1e398..987cf71 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,7 +12,13 @@ import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('Icon'),
+        },
+      },
+    }),
     vueJsx(),
     vueDevTools(),
     AutoImport({