refactor: restructure sidebar components and update navigation

- Updated Container.vue to import SubNavItem from Secondary.vue and renamed component usage.
- Removed NavMain.vue and NavUser.vue components, consolidating sidebar functionality.
- Deleted Sidebar.vue and created a new sidebar structure in index.vue.
- Implemented new Main.vue and User.vue components under sidebar/nav for better organization.
- Added DPlayer for video playback in preview page and adjusted layout accordingly.
- Introduced new course Card.vue component for displaying course information.
- Created Secondary.vue for secondary navigation with improved styling and functionality.
- Updated package.json to include dplayer and its types for video handling.

components/app/Container.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { SubNavItem } from '../SubNav.vue'
+import type { SubNavItem } from '../nav/Secondary.vue'
 
 defineProps<{ subnavs?: SubNavItem[] }>()
 </script>
@@ -8,7 +8,7 @@ defineProps<{ subnavs?: SubNavItem[] }>()
   <div class="flex flex-1 flex-col p-8 page-bg-gradient">
     <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
     <slot name="subnav">
-      <SubNav
+      <NavSecondary
         v-if="subnavs && subnavs.length"
         :navs="subnavs"
       />

components/app/sidebar/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LucideIcon } from 'lucide-vue-next'
 import type { RouteLocationRaw } from 'vue-router'
-import type { SidebarProps } from '../ui/sidebar'
+import type { SidebarProps } from '~/components/ui/sidebar'
 
 export interface SidebarNavItem {
   title: string
@@ -46,17 +46,15 @@ const loginState = useLoginState()
           alt="Logo"
           class="w-9 max-w-9 aspect-square group-has-[[data-collapsible=icon]]/sidebar-wrapper:w-full transition-all duration-200 ease-in-out"
         />
-        <h1 class="text-lg font-medium">
+        <h1 class="text-lg font-medium">智课教学平台</h1>
-          智课教学平台
-        </h1>
       </div>
     </SidebarHeader>
     <SidebarContent>
       <slot name="extra-header" />
-      <AppNavMain :nav="nav" />
+      <AppSidebarNavMain :nav="nav" />
     </SidebarContent>
     <SidebarFooter>
-      <AppNavUser :user="loginState.user" />
+      <AppSidebarNavUser :user="loginState.user" />
     </SidebarFooter>
     <SidebarRail />
   </Sidebar>

components/app/sidebar/nav/User.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ChevronsUpDown } from 'lucide-vue-next'
-import { useSidebar } from '../ui/sidebar'
+import { useSidebar } from '../../../ui/sidebar'
 import type { IUser } from '~/types'
 
 const props = defineProps<{

components/nav/Secondary.vue

@@ -29,7 +29,7 @@ const isCurrentPath = (path: string) => {
       }"
     >
       <svg
-        class="absolute inset-0 aspect-auto"
+        class="absolute inset-0 aspect-auto top-1"
         viewBox="0 0 206.5 72"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ const isCurrentPath = (path: string) => {
         </g>
       </svg>
       <NuxtLink
-        class="text-lg font-medium z-10 select-none"
+        class="text-base font-medium z-10 select-none pb-0.5"
         :class="{
           'text-secondary': isCurrentPath(nav.to),
           'text-neutral-400 dark:text-neutral-500': !isCurrentPath(nav.to),
@@ -77,13 +77,13 @@ const isCurrentPath = (path: string) => {
 
 <style scoped>
 .subnav-item {
-  @apply relative flex justify-center items-center px-4 pt-1 drop-shadow-md;
+  @apply relative flex justify-center items-center px-5 pt-2 drop-shadow-lg;
 
   --svg-stop1: #ffffff;
   --svg-stop2: #f3f3f3;
 
   &:not(:first-of-type) {
-    @apply -ml-3;
+    @apply -ml-4;
   }
 
   &.active {

package.json

@@ -26,6 +26,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dotenv": "^16.5.0",
+    "dplayer": "^1.27.1",
     "eslint": "^9.0.0",
     "lucide-vue-next": "^0.484.0",
     "nuxt": "^3.16.1",
@@ -49,6 +50,7 @@
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@pinia/nuxt": "^0.10.1",
+    "@types/dplayer": "^1.25.5",
     "@vueuse/nuxt": "^13.0.0",
     "dayjs": "^1.11.13",
     "dayjs-nuxt": "^2.1.11",

pages/preview/[resource_url].vue

@@ -5,6 +5,7 @@ import VueOfficeExcel from '@vue-office/excel'
 import VueOfficePdf from '@vue-office/pdf'
 import '@vue-office/docx/lib/index.css'
 import '@vue-office/excel/lib/index.css'
+import DPlayer from 'dplayer'
 
 definePageMeta({
   hideSidebar: true,
@@ -39,6 +40,12 @@ const fileType = computed(() => {
   return ''
 })
 
+const containerClass = computed(() => {
+  return fileType.value === 'video'
+    ? 'max-w-6xl mx-auto'
+    : 'w-full h-full border rounded-lg overflow-hidden'
+})
+
 onMounted(() => {
   useHead({
     title: `${fileType.value.toUpperCase()} 资源预览`,
@@ -49,6 +56,18 @@ onMounted(() => {
       label: `${fileType.value.toUpperCase()} 资源预览`,
     },
   ])
+
+  // initialize video player
+  if (fileType.value === 'video') {
+    const dp = new DPlayer({
+      container: document.getElementById('dplayer'),
+      screenshot: true,
+      video: {
+        url: url.value,
+      },
+    })
+    dp.play()
+  }
 })
 
 const vueOfficeOptions = {
@@ -70,10 +89,16 @@ const vueOfficeOptions = {
     </div>
     <div
       v-else
-      class="w-full h-full border rounded-lg overflow-hidden"
+      :class="containerClass"
     >
+      <!-- Video -->
+      <div
+        v-if="fileType === 'video'"
+        id="dplayer"
+      />
+      <!-- Vue Office -->
       <VueOfficeDocx
-        v-if="fileType === 'word'"
+        v-else-if="fileType === 'word'"
         class="w-full h-full"
         :src="url"
         :options="vueOfficeOptions"

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       dotenv:
         specifier: ^16.5.0
         version: 16.5.0
+      dplayer:
+        specifier: ^1.27.1
+        version: 1.27.1
       eslint:
         specifier: ^9.0.0
         version: 9.23.0(jiti@2.4.2)
@@ -111,6 +114,9 @@ importers:
       '@pinia/nuxt':
         specifier: ^0.10.1
         version: 0.10.1(magicast@0.3.5)(pinia@3.0.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)))
+      '@types/dplayer':
+        specifier: ^1.25.5
+        version: 1.25.5
       '@vueuse/nuxt':
         specifier: ^13.0.0
         version: 13.0.0(magicast@0.3.5)(nuxt@3.16.1(@parcel/watcher@2.5.1)(db0@0.3.1)(eslint@9.23.0(jiti@2.4.2))(ioredis@5.6.0)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.37.0)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.3(jiti@2.4.2)(terser@5.39.0)(yaml@2.7.0))(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
@@ -1212,6 +1218,9 @@ packages:
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
+  '@types/dplayer@1.25.5':
+    resolution: {integrity: sha512-p/7O94dHDo0Irn2KWIqFE+fBCA4DS7QL3jfCOjCUPBAOgppyyTjmNZjKEfiJa1M3n1oVQqG7xnPwhiIuCqOzkQ==}
+
   '@types/estree@1.0.6':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -1650,6 +1659,9 @@ packages:
   async@3.2.6:
     resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
+  asynckit@0.4.0:
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
   at-least-node@1.0.0:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
@@ -1661,12 +1673,18 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  axios@1.2.3:
+    resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==}
+
   b4a@1.6.7:
     resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balloon-css@1.2.0:
+    resolution: {integrity: sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==}
+
   bare-events@2.5.4:
     resolution: {integrity: sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==}
 
@@ -1879,6 +1897,10 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
+  combined-stream@1.0.8:
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -2131,6 +2153,10 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delayed-stream@1.0.0:
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
+
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
@@ -2203,6 +2229,9 @@ packages:
     resolution: {integrity: sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==}
     engines: {node: '>=12'}
 
+  dplayer@1.27.1:
+    resolution: {integrity: sha512-2laBMXs5V1B9zPwJ7eAIw/OBo+Xjvy03i4GHTk3Cg+IWbrq8rKMFO0fFr6ClAYotYOCcFGOvaJDkOZcgKllsCA==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2265,6 +2294,10 @@ packages:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
   esbuild@0.25.1:
     resolution: {integrity: sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ==}
     engines: {node: '>=18'}
@@ -2502,6 +2535,15 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  follow-redirects@1.15.9:
+    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+
   fontaine@0.5.0:
     resolution: {integrity: sha512-vPDSWKhVAfTx4hRKT777+N6Szh2pAosAuzLpbppZ6O3UdD/1m6OlHjNcC3vIbgkRTIcLjzySLHXzPeLO2rE8cA==}
 
@@ -2512,6 +2554,10 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
+  form-data@4.0.2:
+    resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+    engines: {node: '>= 6'}
+
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
@@ -3718,6 +3764,9 @@ packages:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
 
+  promise-polyfill@8.3.0:
+    resolution: {integrity: sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==}
+
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -3725,6 +3774,9 @@ packages:
   protocols@2.0.2:
     resolution: {integrity: sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==}
 
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   pump@3.0.2:
     resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
 
@@ -6022,6 +6074,8 @@ snapshots:
 
   '@types/doctrine@0.0.9': {}
 
+  '@types/dplayer@1.25.5': {}
+
   '@types/estree@1.0.6': {}
 
   '@types/estree@1.0.7': {}
@@ -6528,6 +6582,8 @@ snapshots:
 
   async@3.2.6: {}
 
+  asynckit@0.4.0: {}
+
   at-least-node@1.0.0: {}
 
   autoprefixer@10.4.21(postcss@8.5.3):
@@ -6540,10 +6596,20 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  axios@1.2.3:
+    dependencies:
+      follow-redirects: 1.15.9
+      form-data: 4.0.2
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   b4a@1.6.7: {}
 
   balanced-match@1.0.2: {}
 
+  balloon-css@1.2.0: {}
+
   bare-events@2.5.4:
     optional: true
 
@@ -6769,6 +6835,10 @@ snapshots:
 
   colord@2.9.3: {}
 
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
@@ -6989,6 +7059,8 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delayed-stream@1.0.0: {}
+
   delegates@1.0.0: {}
 
   denque@2.1.0: {}
@@ -7043,6 +7115,14 @@ snapshots:
 
   dotenv@16.5.0: {}
 
+  dplayer@1.27.1:
+    dependencies:
+      axios: 1.2.3
+      balloon-css: 1.2.0
+      promise-polyfill: 8.3.0
+    transitivePeerDependencies:
+      - debug
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -7091,6 +7171,13 @@ snapshots:
     dependencies:
       es-errors: 1.3.0
 
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
   esbuild@0.25.1:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.25.1
@@ -7413,6 +7500,8 @@ snapshots:
 
   flatted@3.3.3: {}
 
+  follow-redirects@1.15.9: {}
+
   fontaine@0.5.0:
     dependencies:
       '@capsizecss/metrics': 2.2.0
@@ -7442,6 +7531,13 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
+  form-data@4.0.2:
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      mime-types: 2.1.35
+
   fraction.js@4.3.7: {}
 
   fresh@0.5.2: {}
@@ -8858,6 +8954,8 @@ snapshots:
 
   process@0.11.10: {}
 
+  promise-polyfill@8.3.0: {}
+
   prompts@2.4.2:
     dependencies:
       kleur: 3.0.3
@@ -8865,6 +8963,8 @@ snapshots:
 
   protocols@2.0.2: {}
 
+  proxy-from-env@1.1.0: {}
+
   pump@3.0.2:
     dependencies:
       end-of-stream: 1.4.4