1

Yes.Blog/Areas/Admin/Pages/Theme/Index.cshtml

@@ -0,0 +1,82 @@
+@page
+@model Yes.Blog.Areas.Admin.Pages.Theme.IndexModel
+@{
+}
+
+
+
+<template x-data x-if="$store.errorMessage">
+    <div class="alert alert-danger" x-show="$store.errorMessage" x-transition x-text="$store.errorMessage"></div>
+</template>
+
+
+<div class="header">
+    <h1 class="page-title">
+        模板设置
+        @*<a class="btn btn-default  btn-xs" asp-page="./Import">
+            <i class="fa fa-plus"></i> 导入模板
+        </a>*@
+    </h1>
+    <ul class="breadcrumb">
+        <li>
+            <a asp-page="/Index">管理中心</a>
+        </li>
+        <li class="active">模板设置</li>
+    </ul>
+
+</div>
+
+<div class="main-content" x-data="data">
+
+    <div class="row">
+        <div class="col-xs-12 col-md-12 col-lg-12 theme-box">
+            <template x-for="(item,index) in items" :key="index">
+                <div class="panel panel-default">
+                    <div :class="item.isInUse ? 'panel-body bg-success' : 'panel-body'">
+                        <img :src="`/themes/${item.dirName}/screenshot.png`" :alt="item.name" class="panel-image">
+                        <div class="panel-content">
+                            <h3 x-text="item.name"></h3>
+                            <p>版本：<span x-text="item.version"></span></p>
+                            <p>作者：<span x-text="item.author"></span></p>
+                            <p>简介：<span x-text="item.description"></span></p>
+
+                            <a class="activate" href="javascript:;" x-show="!item.isInUse" x-on:click="showModal = true;this.theme=item.dirName;">切换到该主题</a>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+        </div>
+    </div>
+
+
+    <div x-show.transition.opacity="showModal" class="modal fade in" id="myModal" tabindex="-1" x-cloak>
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button x-on:click="showModal = false" type="button" class="close" data-dismiss="modal">×</button>
+                    <h3 id="myModalLabel">删除操作确认</h3>
+                </div>
+                <div class="modal-body">
+                    <p class="error-text">
+                        <i class="fa fa-warning modal-icon"></i>确认要切换到该主题吗?
+                        <br>操作后不可恢复.
+                    </p>
+                </div>
+                <div class="modal-footer">
+                    <button x-on:click="showModal = false" class="btn btn-default" data-dismiss="modal">取消</button>
+                    <button x-on:click="showModal = false; confirmAction()" class="btn btn-danger" data-dismiss="modal">确认</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <partial name="_Footer" />
+</div>
+
+
+
+@section Scripts {
+    <script src="~/admin/js/theme/index.js" asp-append-version="true"></script>
+}