feat: 开发中...

2023-04-08 12:32:02 +08:00
parent 41dd722efc
commit 8a48f5ee3a
15 changed files with 142 additions and 66 deletions
--- a/blog-frontend/src/components/BlogCardComponent.vue
+++ b/blog-frontend/src/components/BlogCardComponent.vue
@@ -40,7 +40,7 @@ function showUpdater() {
            {{ blog.creator.nickname }}
          </p>
          <p>
-            {{ " 首次发表于：" + blog.updateTime.toLocaleString() }}
+            {{ " 首次发表于：" + blog.createTime.toLocaleString() }}
          </p>
        </div>
      </div>
--- a/blog-frontend/src/components/manage/AttachManageComponent.vue
+++ b/blog-frontend/src/components/manage/AttachManageComponent.vue
@@ -1,12 +1,43 @@
 <script setup lang="ts">
+import { ref } from "vue";

+const form = ref({
+  file: undefined,
+});
+const uploadDialog = ref<boolean>(false);
+
+function upload() {}
+
+function handleClose() {}
 </script>

 <template>
+  <el-dialog
+    v-model="uploadDialog"
+    title="Tips"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <el-form :model="form">
+      <el-form-item label="Promotion name" label-width="120px">
+        <el-input v-model="form.file" type="file" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="uploadDialog = false"> 取消 </el-button>
+        <el-button type="primary" @click="uploadDialog = false">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
  <div class="attach-contailer">
    <div style="display: flex">
      <div style="flex-grow: 1"></div>
-      <el-button type="primary">上传新附件</el-button>
+      <el-button type="primary" @click="uploadDialog = true">
+        上传新附件
+      </el-button>
      <div style="flex-grow: 1"></div>
    </div>
  </div>
--- a/blog-frontend/src/components/manage/BlogManageComponent.vue
+++ b/blog-frontend/src/components/manage/BlogManageComponent.vue
@@ -102,7 +102,7 @@ function loadPage(newPage: number) {
                {{ blog.creator.nickname }}
              </p>
              <p>
-                {{ " 首次发表于：" + blog.updateTime.toLocaleString() }}
+                {{ " 首次发表于：" + blog.createTime.toLocaleString() }}
              </p>
            </div>
          </div>
--- a/blog-frontend/src/components/manage/SiteManageComponent.vue
+++ b/blog-frontend/src/components/manage/SiteManageComponent.vue
@@ -34,33 +34,39 @@ function changeCustomCSS(cssText: string) {
 </script>

 <template>
-  <el-form class="manage-container">
-    <el-input
-      class="imput-line"
-      v-model="siteSetting.title"
-      placeholder="网站标题"
-      @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)"
-      show-word-limit
-      maxlength="10"
-    />
-    <el-input
-      class="imput-line"
-      type="textarea"
-      show-word-limit
-      maxlength="1024"
-      autosize
-      v-model="siteSetting.footer"
-      placeholder="页脚文本（支持HTML）"
-      @change="changeFooterHTML(siteSetting.footer)"
-    />
-    <el-input
-      class="imput-line"
-      type="textarea"
-      autosize
-      v-model="siteSetting.css"
-      placeholder="自定义CSS"
-      @change="changeCustomCSS(siteSetting.css)"
-    />
+  <el-form class="manage-container" label-width="120px">
+    <el-form-item label="网站标题">
+      <el-input
+        class="imput-line"
+        v-model="siteSetting.title"
+        placeholder="网站标题"
+        @change="changeSetting(siteSetting.keys.site.title, siteSetting.title)"
+        show-word-limit
+        maxlength="10"
+      />
+    </el-form-item>
+    <el-form-item label="页脚文本">
+      <el-input
+        class="imput-line"
+        type="textarea"
+        show-word-limit
+        maxlength="1024"
+        autosize
+        v-model="siteSetting.footer"
+        placeholder="页脚文本（支持HTML）"
+        @change="changeFooterHTML(siteSetting.footer)"
+      />
+    </el-form-item>
+    <el-form-item label="自定义CSS">
+      <el-input
+        class="imput-line"
+        type="textarea"
+        autosize
+        v-model="siteSetting.css"
+        placeholder="自定义CSS"
+        @change="changeCustomCSS(siteSetting.css)"
+      />
+    </el-form-item>
  </el-form>
 </template>

--- a/blog-frontend/src/views/BlogEditView.vue
+++ b/blog-frontend/src/views/BlogEditView.vue
@@ -143,7 +143,7 @@ function handleCreated(editor: IDomEditor) {
        <el-form-item label="博文摘要">
          <el-input
            placeholder="博文摘要"
-            maxlength="512"
+            maxlength="1024"
            show-word-limit
            type="textarea"
            autosize
--- a/blog-frontend/src/views/BlogReadView.vue
+++ b/blog-frontend/src/views/BlogReadView.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "@wangeditor/editor/dist/css/style.css";
 import { ref } from "vue";
 import { useRoute } from "vue-router";

@@ -108,28 +107,58 @@ function deleteBlog() {
 .blog-content {
  width: 95%;
  margin: 0 auto;
-  overflow-x: hidden;
-}
-.blog-content > h1,
-h2,
-h3,
-h4,
-h5 {
-  line-height: 64px;
 }

-.blog-content > p {
-  line-height: 24px;
+.blog-content > p,
+img {
+  width: 100%;
 }

-.blog-content > * {
-  font-family: system-ui;
-  font-size: normal;
+.blog-content p,
+.blog-content li {
+  white-space: pre-wrap; /* 保留空格 */
 }

-.blog-content > pre {
-  margin: 12px 0 12px 0;
-  padding: 12px 12px 12px 12px;
-  background-color: #ccc;
+.blog-content blockquote {
+  border-left: 8px solid #d0e5f2;
+  padding: 10px 10px;
+  margin: 10px 0;
+  background-color: #f1f1f1;
+}
+
+.blog-content code {
+  font-family: monospace;
+  background-color: #eee;
+  padding: 3px;
+  border-radius: 3px;
+}
+
+.blog-content pre > code {
+  display: block;
+  padding: 10px;
+}
+
+.blog-content table {
+  border-collapse: collapse;
+}
+
+.blog-content td,
+.blog-content th {
+  border: 1px solid #ccc;
+  min-width: 50px;
+  height: 20px;
+}
+
+.blog-content th {
+  background-color: #f1f1f1;
+}
+
+.blog-content ul,
+.blog-content ol {
+  padding-left: 20px;
+}
+
+.blog-content input[type="checkbox"] {
+  margin-right: 5px;
 }
 </style>
--- a/blog-frontend/src/views/ManagePaneView.vue
+++ b/blog-frontend/src/views/ManagePaneView.vue
@@ -23,20 +23,30 @@ onMounted(() => {
 </script>

 <template>
-  <el-tabs v-model="activeName" type="card" class="demo-tabs">
-    <el-tab-pane label="网站设置" name="site">
+  <el-tabs v-model="activeName" type="card" class="manage-tabs">
+    <el-tab-pane label="网站设置" name="site" class="manage-sub-tab">
      <SiteManageComponent />
    </el-tab-pane>
-    <el-tab-pane label="博文管理" name="third">
+    <el-tab-pane label="博文管理" name="third" class="manage-sub-tab">
      <BlogManageComponent />
    </el-tab-pane>
-    <el-tab-pane label="附件管理" name="user">
+    <el-tab-pane label="附件管理" name="user" class="manage-sub-tab">
      <AttachManageComponent />
    </el-tab-pane>
-    <el-tab-pane label="用户管理" name="test">
+    <el-tab-pane label="用户管理" name="test" class="manage-sub-tab">
      <UserManageComponent />
    </el-tab-pane>
  </el-tabs>
 </template>

-<style scoped></style>
+<style scoped>
+.manage-tabs {
+  width: 100%;
+  height: 100%;
+  padding: 5px 30px 0 30px;
+}
+.manage-sub-tab {
+  width: 100%;
+  height: 100%;
+}
+</style>