v1.0.0

src/views/exception/404/index.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="flex h-full">
+    <div class="px-4 m-auto space-y-4 text-center max-[400px]">
+      <h1 class="text-4xl text-slate-800 dark:text-neutral-200">
+        <!-- Sorry, page not found! -->
+        页面不存在
+      </h1>
+      <p class="text-base text-slate-500 dark:text-neutral-400">
+        <!-- Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? Be sure to check your spelling. -->
+      </p>
+      <div class="flex items-center justify-center text-center">
+        <div class="w-[300px]">
+          <img src="../../../icons/404.svg" alt="404">
+        </div>
+      </div>
+      <NButton type="primary" @click="goHome">
+        <!-- Go to Home -->
+        返回首页
+      </NButton>
+    </div>
+  </div>
+</template>

src/views/exception/500/index.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { NButton } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import Icon500 from '@/icons/500.vue'
+
+const router = useRouter()
+
+function goHome() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="flex h-full dark:bg-neutral-800">
+    <div class="px-4 m-auto space-y-4 text-center max-[400px]">
+      <header class="space-y-2">
+        <h2 class="text-2xl font-bold text-center text-slate-800 dark:text-neutral-200">
+          500
+        </h2>
+        <p class="text-base text-center text-slate-500 dark:text-slate-500">
+          <!-- Server error -->
+          服务器错误
+        </p>
+        <div class="flex items-center justify-center text-center">
+          <Icon500 class="w-[300px]" />
+        </div>
+      </header>
+      <NButton type="primary" @click="goHome">
+        <!-- Go to Home -->
+        返回首页
+      </NButton>
+    </div>
+  </div>
+</template>

src/views/exception/test/RecursiveList.vue

@@ -0,0 +1,52 @@
+<template>
+    <div v-for="(item, index) in items" :key="index" :class="isChilden ? 'ml-[20px]' : ''">
+        <!-- <span class="items-center flex">
+            <NAvatar round :size="30" :src="item.headImage ? item.headImage : defaultAvatar" />
+        </span> -->
+
+
+        <div
+            class="flex items-center cursor-pointer my-[15px] p-[5px] hover:bg-slate-100 dark:hover:bg-slate-800 rounded-md">
+
+            <div class="w-[25px]">
+                <span v-if="item.children" class="cursor-pointer">
+                    <!-- 收起展开：'rotate-90' :'rotate-0' -->
+                    <SvgIcon width="18" height="18" class="list-expand" :class="item.extand?'rotate-90':'rotate-0'" icon="ic:round-play-arrow" />
+                </span>
+            </div>
+
+            <span class="flex items-center mr-[5px] text-slate-400 hover:text-black dark:hover:text-white">
+                {{ item.name }}
+                <!-- <NDropdown trigger="click" :options="item.isTop === 1 ? unSetTopOptions : setTopOptions" size="small"
+                @select="(key: string) => handleClick(key, item.id)">
+                <SvgIcon icon="ri:more-fill" />
+            </NDropdown> -->
+
+            </span>
+
+
+        </div>
+        <div v-show="item.extand">
+            <!-- 如果有子级，递归渲染 -->
+            <recursive-list v-if="item.children" :is-childen="true" :items="item.children"></recursive-list>
+        </div>
+
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { SvgIcon } from '@/components/common'
+import { defineProps } from "vue"
+defineProps<{
+    items: Array<any>,
+    isChilden?: boolean
+}>()
+
+</script>
+  
+<style>
+.list-expand {
+    transition-property: transform;
+    transition-duration: .25s;
+}
+</style>

src/views/exception/test/demo.vue

@@ -0,0 +1,13 @@
+<script setup lang='ts'>
+</script>
+
+<template>
+  <div />
+</template>
+
+<style>
+html,body{
+  padding: 20px;
+  background-color: beige;
+}
+</style>

src/views/exception/test/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import RecursiveList from './RecursiveList.vue'
+
+const multiLevelData = [
+  {
+    name: '开发笔记',
+    children: [
+      {
+        name: 'Level 2 Item 1',
+        extand: true,
+        children: [
+          { name: 'SAI-Chat开发' },
+          { name: '笔记本项目' },
+        ],
+      },
+      { name: '测试项目' },
+    ],
+  },
+  {
+    name: '学习笔记',
+    children: [
+      { name: 'Blender' },
+      { name: 'mongo' },
+    ],
+  },
+]
+</script>
+
+<template>
+  <div>
+    <RecursiveList :items="multiLevelData" />
+  </div>
+</template>