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

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>
-  <div class="p-5 w-h-full">
+  <n-config-provider
-  <LayoutCom>
+    :theme-overrides="themeOverrides"
-    <!-- <RouterView /> -->
+    class="h-full w-full"
-  </LayoutCom>
+    :locale="zhCN"
-  </div>
+    :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,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">
+          <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}`}>
-            </NLayoutHeader>
+                <div class="h-full">title</div>
-            <div class="h-5"></div>
+              </NLayoutHeader>
+            </div>
+            <div class={`h-5 ${bgColor}`}></div>
             <NLayout has-sider class="flex-1" content-class="w-h-full">
-              <NLayoutSider
+              <div class={`${bgColor} h-full`}>
-                class={`${border}`}
+                <NLayoutSider
-                show-trigger
+                  class={`${border} h-full`}
-                collapse-mode="width"
+                  show-trigger
-                collapsed-width={64}
+                  collapse-mode="width"
-                width={240}
+                  collapsed-width={64}
-                content-class="w-h-full"
+                  width={240}
-                native-scrollbar={false}
+                  content-class="w-h-full"
-              >
+                  native-scrollbar={false}
-                <MenuCom />
+                >
-              </NLayoutSider>
+                  <MenuCom />
-              <div class="p-3"></div>
+                </NLayoutSider>
-              <NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
+              </div>
-                <NScrollbar>
+
-                  <RouterView class="w-h-full" />
+              <div class={`p-3 ${bgColor}`}></div>
-                </NScrollbar>
+              <div class={`${bgColor} h-full`}>
-              </NLayoutContent>
+                <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,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 () => (
-      <>
+      <div class="w-h-full flex-col flex gap-5">
-        <SandpackProvider
+        <HeaderOperate />
-          class="!w-h-full"
+        <div class="flex-1">
-          theme={atomDark}
+          <SandpackProvider
-          template="static"
+            class="!w-h-full"
-          option={{
+            theme={atomDark}
-            showConsole: true,
+            template="static"
-          }}
+            option={{
-        >
+              showConsole: true,
-          <SandpackLayout class="w-h-full">
+            }}
-            <SandpackFileExplorer class="!h-full" />
+          >
-            {/* <SandpackCodeEditor
+            <SandpackLayout class="w-h-full">
+              <SandpackFileExplorer class="!h-full" />
+              {/* <SandpackCodeEditor
               class="!h-full"
               ref={codemirrorInstance}
               showTabs
               showLineNumbers={true}
               showInlineErrors={false}
             /> */}
-            <CodeEditor />
+              <CodeEditor />
-            <SandpackPreview class="!h-full" />
+              <SandpackPreview class="!h-full" />
-          </SandpackLayout>
+            </SandpackLayout>
-          {/* <SandpackLayout>
+            {/* <SandpackLayout>
           <SandpackConsole />
           </SandpackLayout> */}
-        </SandpackProvider>
+          </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({