点击卡片跳转编辑代码新页面

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']

src/App.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+// import { RouterView } from 'vue-router'
-import LayoutCom from "./views/Layout";
+import LayoutCom from './views/Layout'
+import { zhCN, dateZhCN } from 'naive-ui'
 </script>
 
 <template>
+  <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 scoped></style>
-
-</style>

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;

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, { default: () => h(option.icon ?? BookmarkOutline) })
-    return h(NIcon, null, option.icon)
-  } else {
-    return h(NIcon, null, { default: () => h(option.icon ? option.icon : BookmarkOutline) })
-  }
 }
 
 const expandIcon = () => {

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,14 +21,17 @@ export default defineComponent({
         <RouterView></RouterView>
       ) : (
         <div class="w-h-full">
-          <NLayout class="w-h-full" content-class="flex flex-col w-h-full">
+          <NLayout class={`w-h-full ${bgColor}`} content-class="flex flex-col w-h-full">
-            <NLayoutHeader class="h-12">
+            <div class={`${bgColor}`}>
-              <div class={`h-full ${border}`}>title</div>
+              <NLayoutHeader class={`h-[64px] ${border}`}>
+                <div class="h-full">title</div>
               </NLayoutHeader>
-            <div class="h-5"></div>
+            </div>
+            <div class={`h-5 ${bgColor}`}></div>
             <NLayout has-sider class="flex-1" content-class="w-h-full">
+              <div class={`${bgColor} h-full`}>
                 <NLayoutSider
-                class={`${border}`}
+                  class={`${border} h-full`}
                   show-trigger
                   collapse-mode="width"
                   collapsed-width={64}
@@ -36,12 +41,16 @@ export default defineComponent({
                 >
                   <MenuCom />
                 </NLayoutSider>
-              <div class="p-3"></div>
+              </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>

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>
+    )
+  },
+})

src/views/Sandpack/index.tsx

@@ -6,11 +6,14 @@ 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 () => (
-      <>
+      <div class="w-h-full flex-col flex gap-5">
+        <HeaderOperate />
+        <div class="flex-1">
           <SandpackProvider
             class="!w-h-full"
             theme={atomDark}
@@ -35,7 +38,8 @@ export default defineComponent({
           <SandpackConsole />
           </SandpackLayout> */}
           </SandpackProvider>
-      </>
+        </div>
+      </div>
     )
   },
 })

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({