From 76ed305ae546db26199f3bbc97614b9886ee910c Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Mon, 30 May 2022 16:36:34 +0800 Subject: [PATCH] refactor: theme page ui Signed-off-by: Ryan Wang --- src/components/base/modal/Modal.vue | 6 +- src/core/icons.ts | 6 + src/router/menus.config.ts | 8 +- src/router/routes.config.ts | 36 ++- src/views/interface/themes/ThemeDetail.vue | 316 +++++++++++++++++++++ src/views/interface/themes/ThemeList.vue | 43 --- src/views/interface/themes/themes-mock.ts | 96 +++---- src/views/interface/visual/Visual.vue | 99 +++++-- src/views/system/plugins/PluginDetail.vue | 16 +- src/views/system/roles/RoleList.vue | 2 + src/views/system/users/UserList.vue | 2 +- 11 files changed, 491 insertions(+), 139 deletions(-) create mode 100644 src/views/interface/themes/ThemeDetail.vue delete mode 100644 src/views/interface/themes/ThemeList.vue create mode 100644 src/views/system/roles/RoleList.vue diff --git a/src/components/base/modal/Modal.vue b/src/components/base/modal/Modal.vue index 268ec0ed..7a759ed7 100644 --- a/src/components/base/modal/Modal.vue +++ b/src/components/base/modal/Modal.vue @@ -1,4 +1,5 @@ + + diff --git a/src/views/interface/themes/ThemeList.vue b/src/views/interface/themes/ThemeList.vue deleted file mode 100644 index e5a7282f..00000000 --- a/src/views/interface/themes/ThemeList.vue +++ /dev/null @@ -1,43 +0,0 @@ - - diff --git a/src/views/interface/themes/themes-mock.ts b/src/views/interface/themes/themes-mock.ts index 354d10aa..7e643050 100644 --- a/src/views/interface/themes/themes-mock.ts +++ b/src/views/interface/themes/themes-mock.ts @@ -1,4 +1,52 @@ export const themes = [ + { + id: "caicai_anatole", + name: "Anatole", + website: "https://github.com/halo-dev/halo-theme-anatole", + branch: "master", + repo: "https://github.com/halo-dev/halo-theme-anatole", + updateStrategy: "RELEASE", + description: "A other Halo theme", + logo: "https://avatars1.githubusercontent.com/u/1811819?s=460&v=4", + version: "1.2.0", + require: "1.3.0", + author: { + name: "Caicai", + website: "https://www.caicai.me", + avatar: null, + }, + themePath: "/root/.halo/templates/themes/caicai_anatole", + folderName: "caicai_anatole", + hasOptions: true, + screenshots: "https://demo.halo.run/themes/caicai_anatole/screenshot.png", + postMetaField: null, + sheetMetaField: null, + activated: true, + }, + { + id: "flex-block", + name: "flex-block", + website: "https://github.com/guiyunweb/halo-theme-flex-block", + branch: "master", + repo: "https://github.com/guiyunweb/halo-theme-flex-block", + updateStrategy: "RELEASE", + description: "flex-block主题修改", + logo: "https://image.guiyunweb.com/2021/84306692_p0_master1200_1608708448480_1625562784578_1625565770497.jpg", + version: "2.0", + require: null, + author: { + name: "Guiyunweb", + website: "https://guiyunweb.com", + avatar: null, + }, + themePath: "/root/.halo/templates/themes/flex-block", + folderName: "flex-block", + hasOptions: true, + screenshots: "https://demo.halo.run/themes/flex-block/screenshot.png", + postMetaField: null, + sheetMetaField: null, + activated: false, + }, { id: "cetr_sagiri", name: "Sagiri", @@ -47,30 +95,6 @@ export const themes = [ sheetMetaField: null, activated: false, }, - { - id: "caicai_anatole", - name: "Anatole", - website: "https://github.com/halo-dev/halo-theme-anatole", - branch: "master", - repo: "https://github.com/halo-dev/halo-theme-anatole", - updateStrategy: "RELEASE", - description: "A other Halo theme", - logo: "https://avatars1.githubusercontent.com/u/1811819?s=460&v=4", - version: "1.2.0", - require: "1.3.0", - author: { - name: "Caicai", - website: "https://www.caicai.me", - avatar: null, - }, - themePath: "/root/.halo/templates/themes/caicai_anatole", - folderName: "caicai_anatole", - hasOptions: true, - screenshots: "https://demo.halo.run/themes/caicai_anatole/screenshot.png", - postMetaField: null, - sheetMetaField: null, - activated: false, - }, { id: "louie_senpai_siren", name: "Siren", @@ -459,30 +483,6 @@ export const themes = [ sheetMetaField: null, activated: false, }, - { - id: "flex-block", - name: "flex-block", - website: "https://github.com/guiyunweb/halo-theme-flex-block", - branch: "master", - repo: "https://github.com/guiyunweb/halo-theme-flex-block", - updateStrategy: "RELEASE", - description: "flex-block主题修改", - logo: "https://image.guiyunweb.com/2021/84306692_p0_master1200_1608708448480_1625562784578_1625565770497.jpg", - version: "2.0", - require: null, - author: { - name: "Guiyunweb", - website: "https://guiyunweb.com", - avatar: null, - }, - themePath: "/root/.halo/templates/themes/flex-block", - folderName: "flex-block", - hasOptions: true, - screenshots: "https://demo.halo.run/themes/flex-block/screenshot.png", - postMetaField: null, - sheetMetaField: null, - activated: true, - }, { id: "imzeuk_zozo", name: "Zozo", diff --git a/src/views/interface/visual/Visual.vue b/src/views/interface/visual/Visual.vue index 67f87e7c..038aa94e 100644 --- a/src/views/interface/visual/Visual.vue +++ b/src/views/interface/visual/Visual.vue @@ -2,13 +2,30 @@ import { VButton } from "@/components/base/button"; import { VInput } from "@/components/base/input"; import { VOption, VSelect } from "@/components/base/select"; +import { VModal } from "@/components/base/modal"; import { VTextarea } from "@/components/base/textarea"; +import { VCard } from "@/components/base/card"; import { VTabbar, VTabItem, VTabs } from "@/components/base/tabs"; -import { computed, ref } from "vue"; +import { computed, onMounted, ref } from "vue"; import { IconComputer, IconPhone, IconTablet } from "@/core/icons"; const activeId = ref("general"); const deviceActiveId = ref("desktop"); +const attachmentSelectVisible = ref(false); +const devices = ref([ + { + id: "desktop", + icon: IconComputer, + }, + { + id: "tablet", + icon: IconTablet, + }, + { + id: "phone", + icon: IconPhone, + }, +]); const iframeClasses = computed(() => { if (deviceActiveId.value === "desktop") { @@ -20,11 +37,74 @@ const iframeClasses = computed(() => { // phone return "w-96 h-[50rem]"; }); + +const attachments = Array.from(new Array(50), (_, index) => index).map( + (index) => { + return { + id: index, + name: `attachment-${index}`, + url: `https://picsum.photos/1000/700?random=${index}`, + size: "1.2MB", + type: "image/png", + strategy: "本地存储", + }; + } +); + +onMounted(() => { + window.addEventListener( + "message", + function receiveMessageFromIframePage(event) { + if (event.data === "select_image") { + attachmentSelectVisible.value = true; + } + }, + false + ); +});