主题切换

src/api/theme.js

@@ -4,6 +4,13 @@ const baseUrl = '/admin/api/themes'
 
 const themeApi = {}
 
+themeApi.listAll = () => {
+  return service({
+    url: `${baseUrl}`,
+    method: 'get'
+  })
+}
+
 themeApi.listFiles = () => {
   return service({
     url: `${baseUrl}/files`,
@@ -18,4 +25,11 @@ themeApi.customTpls = () => {
   })
 }
 
+themeApi.active = theme => {
+  return service({
+    url: `${baseUrl}/active?theme=${theme}`,
+    method: 'get'
+  })
+}
+
 export default themeApi

src/views/interface/ThemeList.vue

@@ -1,73 +1,95 @@
 <template>
   <div class="page-header-index-wide">
     <a-row :gutter="12" type="flex" align="middle">
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
-        </a-card>
-      </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
-        </a-card>
-      </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
-        </a-card>
-      </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
-        </a-card>
-      </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
-        </a-card>
-      </a-col>
-      <a-col :xl="6" :lg="6" :md="6" :sm="12" :xs="24">
-        <a-card>
-          <img alt="example" src="https://ryanc.cc/material/screenshot.png" slot="cover">
-          <template class="ant-card-actions" slot="actions">
-            <a-icon type="check"/>
-            <a-icon type="setting"/>
-          </template>
-          <a-card-meta title="Anatole"></a-card-meta>
+      <a-col
+        class="theme-item"
+        :xl="6"
+        :lg="6"
+        :md="12"
+        :sm="12"
+        :xs="24"
+        v-for="(theme, index) in themes"
+        :key="index">
+        <a-card :bodyStyle="{ padding: '14px' }">
+          <img
+            :alt="theme.properties.name"
+            :src="'http://localhost:8090/' + theme.key + '/screenshot.png'"
+            slot="cover"
+          />
+          <a-divider></a-divider>
+          <div class="theme-control">
+            <span class="theme-title">
+              {{ theme.properties.name }}
+            </span>
+            <a-button-group class="theme-button">
+              <a-button type="primary" v-if="activatedTheme==theme.key" disabled>已启用</a-button>
+              <a-button type="primary" @click="activeTheme(theme.key)" v-else>启用</a-button>
+              <a-button @click="optionModal(theme.key)">设置</a-button>
+            </a-button-group>
+          </div>
         </a-card>
       </a-col>
     </a-row>
+    <a-modal
+      :title="optionTheme+' 主题设置'"
+      width="90%"
+      v-model="visible"
+    >
+      <iframe :src="optionUrl" height="560" width="100%" frameborder="0" scrolling="auto"></iframe>
+    </a-modal>
   </div>
 </template>
 
 <script>
-export default {}
+import themeApi from '@/api/theme'
+export default {
+  data() {
+    return {
+      themes: [],
+      visible: false,
+      optionTheme: '',
+      optionUrl: 'https://ryanc.cc',
+      activatedTheme: 'anatole'
+    }
+  },
+  created() {
+    this.loadThemes()
+  },
+  methods: {
+    loadThemes() {
+      themeApi.listAll().then(response => {
+        this.themes = response.data.data
+      })
+    },
+    optionModal(theme) {
+      this.optionTheme = theme
+      this.visible = true
+    },
+    activeTheme(theme) {
+      themeApi.active(theme).then(response => {
+        this.activatedTheme = theme
+        this.$message.success('设置成功！')
+        this.loadThemes()
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
+.ant-divider-horizontal{
+  margin: 14px 0;
+}
+
+.theme-item {
+  padding-bottom: 12px;
+}
+
+.theme-item .theme-control .theme-title{
+  font-size: 18px;
+}
+
+.theme-item .theme-control .theme-button{
+  float: right;
+}
 </style>

src/views/post/PostEdit.vue

@@ -15,7 +15,7 @@
 
         <a-card>
           <div id="editor">
-            <mavon-editor :toolbars="markdownOption" v-model="value" :boxShadow="false" :ishljs = "true"/>
+            <mavon-editor :toolbars="markdownOption" v-model="value" :boxShadow="false" :ishljs="true"/>
           </div>
         </a-card>
       </a-col>