diff --git a/src/assets/img/left-top-logo.png b/src/assets/img/left-top-logo.png new file mode 100644 index 0000000..9d7f00b Binary files /dev/null and b/src/assets/img/left-top-logo.png differ diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue index 0de8378..439450f 100644 --- a/src/layout/components/AppMain.vue +++ b/src/layout/components/AppMain.vue @@ -24,7 +24,8 @@ const tagsViewStore = useTagsViewStore(); /* 50= navbar 50 */ min-height: calc(100vh - 50px); overflow: hidden; - background-color: var(--el-bg-color-page); + // background-color: var(--el-bg-color-page); + background-color: #000; } .fixed-header + .app-main { diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 529ad8f..cc0b051 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,4 +1,5 @@ + +
{{ routeName }}
+
+
个人账户
+
退出登录
@@ -154,4 +172,24 @@ function routerTo() { } } } +// 代替原来的navbar +.myNavbar { + display: flex; + align-items: center; + justify-content: flex-end; + height: 50px; + padding: 0 20px; + color: #fff; + background-color: #fff; + background-color: #000; + box-shadow: 0 0 1px #0003; + + .avatar { + width: 30px; + height: 30px; + margin-right: 5px; + background-color: red; + border-radius: 50%; + } +} diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 864ab62..45f3b15 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -1,13 +1,13 @@ + + diff --git a/src/router/index.ts b/src/router/index.ts index d422750..7e13bba 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -31,8 +31,13 @@ export const constantRoutes: RouteRecordRaw[] = [ path: "createVideo", component: () => import("@/views/createVideo/index.vue"), name: "createVideo", - meta: { title: "createVideo", icon: "homepage", affix: true }, - } + meta: { + title: "createVideo", + icon: "homepage", + affix: true, + name: "创作视频", + }, + }, ], }, // 视频列表 @@ -45,8 +50,13 @@ export const constantRoutes: RouteRecordRaw[] = [ path: "myCreating", component: () => import("@/views/myCreating/index.vue"), name: "myCreating", - meta: { title: "myCreating", icon: "homepage", affix: true }, - } + meta: { + title: "myCreating", + icon: "homepage", + affix: true, + name: "我的视频", + }, + }, ], }, // 个人账户 @@ -59,36 +69,52 @@ export const constantRoutes: RouteRecordRaw[] = [ path: "myAccount", component: () => import("@/views/myAccount/index.vue"), name: "myAccount", - meta: { title: "myAccount", icon: "homepage", affix: true }, - } + meta: { + title: "myAccount", + icon: "homepage", + affix: true, + name: "个人账户", + }, + }, ], }, - + // 商店 { - path: "/dashboard", + path: "/", component: Layout, - redirect: "/dashboard", + redirect: "/myStore", children: [ { - path: "dashboard", - component: () => import("@/views/dashboard/index.vue"), - name: "Dashboard", - meta: { title: "dashboard", icon: "homepage", affix: true }, - }, - { - path: "401", - component: () => import("@/views/error-page/401.vue"), - meta: { hidden: true }, - }, - { - path: "404", - component: () => import("@/views/error-page/404.vue"), - meta: { hidden: true }, + path: "myStore", + component: () => import("@/views/myStore/index.vue"), + name: "myStore", + meta: { title: "myStore", icon: "homepage", affix: true, name: "商店" }, }, ], }, - - + // { + // path: "/dashboard", + // component: Layout, + // redirect: "/dashboard", + // children: [ + // { + // path: "dashboard", + // component: () => import("@/views/dashboard/index.vue"), + // name: "Dashboard", + // meta: { title: "dashboard", icon: "homepage", affix: true }, + // }, + // { + // path: "401", + // component: () => import("@/views/error-page/401.vue"), + // meta: { hidden: true }, + // }, + // { + // path: "404", + // component: () => import("@/views/error-page/404.vue"), + // meta: { hidden: true }, + // }, + // ], + // }, // 外部链接 /*{ diff --git a/src/settings.ts b/src/settings.ts index e5ed4d7..14e1531 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -43,8 +43,8 @@ interface DefaultSettings { const defaultSettings: DefaultSettings = { title: "vue3-element-admin", - showSettings: true, - tagsView: true, + showSettings: false, + tagsView: false, fixedHeader: false, sidebarLogo: true, layout: "left", diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index 908359c..69466c7 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -4,6 +4,7 @@ import { useStorage } from "@vueuse/core"; export const useSettingsStore = defineStore("setting", () => { // state + const tagsView = useStorage("tagsView", defaultSettings.tagsView); const showSettings = ref(defaultSettings.showSettings); diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index efaa4e9..1b3e870 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -37,6 +37,8 @@ } &.has-logo { + background-color: #000; + .el-scrollbar { height: calc(100% - 50px); } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e11df30..c9351bb 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,10 +4,15 @@ --menuBg: #304156; --menuText: #bfcbd9; --menuActiveText: #409eff; - --menuHover: #263445; - --subMenuBg: #1f2d3d; + // 左侧菜单鼠标经过颜色 + --menuHover: #000; + // --menuHover: #263445; + // 左侧子菜单颜色 + --subMenuBg: #000; + // --subMenuBg: #1f2d3d; --subMenuActiveText: #f4f4f5; - --subMenuHover: #001528; + // --subMenuHover: #001528; + --subMenuHover: #000; } $menuBg: var(--menuBg); diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts index d7ad703..340c2e4 100644 --- a/src/types/auto-imports.d.ts +++ b/src/types/auto-imports.d.ts @@ -5,6 +5,7 @@ declare global { const ElForm: typeof import("element-plus/es")["ElForm"]; const ElMessage: typeof import("element-plus/es")["ElMessage"]; const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]; + const ElTree: typeof import("element-plus/es")["ElTree"]; const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]; const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]; const computed: typeof import("vue")["computed"]; @@ -278,6 +279,7 @@ declare module "vue" { readonly ElMessageBox: UnwrapRef< typeof import("element-plus/es")["ElMessageBox"] >; + readonly ElTree: UnwrapRef; readonly asyncComputed: UnwrapRef< typeof import("@vueuse/core")["asyncComputed"] >; diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 5797272..1f0a289 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -11,6 +11,8 @@ declare module '@vue/runtime-core' { ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] + ElCard: typeof import('element-plus/es')['ElCard'] + ElCol: typeof import('element-plus/es')['ElCol'] ElDialog: typeof import('element-plus/es')['ElDialog'] ElDivider: typeof import('element-plus/es')['ElDivider'] ElDropdown: typeof import('element-plus/es')['ElDropdown'] @@ -20,17 +22,26 @@ declare module '@vue/runtime-core' { ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElInput: typeof import('element-plus/es')['ElInput'] + ElLink: typeof import('element-plus/es')['ElLink'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElOption: typeof import('element-plus/es')['ElOption'] + ElPagination: typeof import('element-plus/es')['ElPagination'] + ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElSwitch: typeof import('element-plus/es')['ElSwitch'] + ElTable: typeof import('element-plus/es')['ElTable'] + ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTooltip: typeof import('element-plus/es')['ElTooltip'] + ElTree: typeof import('element-plus/es')['ElTree'] + ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] + ElUpload: typeof import('element-plus/es')['ElUpload'] GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] @@ -39,8 +50,15 @@ declare module '@vue/runtime-core' { IEpDelete: typeof import('~icons/ep/delete')['default'] IEpDownload: typeof import('~icons/ep/download')['default'] IEpEdit: typeof import('~icons/ep/edit')['default'] + IEpGoods: typeof import('~icons/ep/goods')['default'] + IEpMenu: typeof import('~icons/ep/menu')['default'] IEpPlus: typeof import('~icons/ep/plus')['default'] + IEpRefresh: typeof import('~icons/ep/refresh')['default'] + IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default'] + IEpSearch: typeof import('~icons/ep/search')['default'] IEpSetting: typeof import('~icons/ep/setting')['default'] + IEpTop: typeof import('~icons/ep/top')['default'] + IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default'] IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] @@ -53,4 +71,7 @@ declare module '@vue/runtime-core' { SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] } + export interface ComponentCustomProperties { + vLoading: typeof import('element-plus/es')['ElLoadingDirective'] + } } diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index e1aa23e..c1059f4 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -156,9 +156,10 @@ let languageOptions = reactive([