UI优化

front/src/config.ts

@@ -21,7 +21,7 @@ export const globalConfig: GlobalConfig = {
   baseURL: process.env.VUE_APP_API_BASE_URL || "",
 
   // 请求超时时间
-  timeOut: 8000,
+  timeOut: 30000,
 
   // 组件最大缓存数
   Max_KeepAlive: 10,

front/src/views/posts/list.vue

@@ -18,7 +18,7 @@
               </template>
             </q-input>
             <!-- 分类选择 -->
-            <q-select class="col" v-model="selectedCategory" :options="filteredCategoryOptions" option-value="Id" option-label="Name" label="分类" outlined dense style="min-width: 200px" map-options use-input input-debounce="300" @filter="filterCategoryOptions" clearable>
+            <q-select class="col" v-model="selectedCategory" :options="filteredCategoryOptions" option-value="Id" option-label="Name" label="分类" outlined dense style="min-width: 200px" map-options use-input input-debounce="300" @filter="filterCategoryOptions" clearable @update:model-value="loadPageData">
               <template v-slot:no-option>
                 <q-item>
                   <q-item-section class="text-grey"> 没有找到匹配的分类 </q-item-section>
@@ -26,7 +26,7 @@
               </template>
             </q-select>
             <!-- 排序方式选择 -->
-            <q-select class="col" v-model="orderBy" :options="sortOptions" option-value="value" option-label="name" label="排序方式" outlined dense style="min-width: 220px" map-options emit-value>
+            <q-select class="col search-btn" v-model="orderBy" :options="sortOptions" option-value="value" option-label="name" label="排序方式" outlined dense style="min-width: 220px" map-options emit-value @update:model-value="loadPageData">
               <template #after>
                 <q-btn color="primary" icon="refresh" :loading="loading" @click="loadPageData"> 搜索 </q-btn>
               </template>
@@ -883,6 +883,7 @@ onMounted(async () => {
   initEventSource()
   initChart()
   showColumns.value = (localStorage.getItem('showColumns') || 'PostDate').split(',')
+  document.querySelector('.search-btn').scrollIntoView({ behavior: 'smooth', block: 'center' })
 })
 
 onBeforeUnmount(() => {

front/src/views/posts/write.vue

@@ -9,7 +9,7 @@
   <div class="text-h6" v-if="route.query.refer">复制来源ID：{{ route.query.refer }}</div>
   <!-- 文章标题 -->
   <div class="row">
-    <q-input autogrow class="col" v-model="post.Title" label="文章标题" outlined required :rules="[val => !!val || '请输入文章标题', val => val.length >= 2 || '标题至少2个字符', val => val.length <= 128 || '标题最多128个字符']">
+    <q-input autogrow class="col" v-model="post.Title" label="文章标题" outlined required :rules="[val => !!val || '请输入文章标题', val => val.length >= 2 || '标题至少2个字符', val => val.length <= 128 || '标题最多128个字符']" style="font-size: 23px;">
       <template v-slot:append>
         <q-btn dense size="lg" color="info" label="上传Word文档" @click="showWordUpload" class="full-width" icon="upload" no-caps />
       </template>
@@ -27,12 +27,12 @@
       <div class="row items-center">
         <q-select dense v-model="post.ProtectContentMode" :options="protectModeOptions" label="加密模式" outlined style="min-width: 200px;" map-options emit-value>
           <template v-slot:before>
-            <div class="text-h6">文章加密</div>
+            <div class="text-h6">文章加密内容</div>
           </template>
         </q-select>
         <!-- 地区可见配置 -->
         <div v-if="post.ProtectContentMode === 2" class="row items-center">
-          <q-input autogrow dense v-model="post.ProtectContentRegions" label="可见地区" placeholder="竖线分隔，支持国家、地区、城市、运营商、ASN" style="width: 450px;" outlined>
+          <q-input autogrow dense v-model="post.ProtectContentRegions" label="可见地区" shadow-text="竖线分隔，支持国家、地区、城市、运营商、ASN" style="width: 450px;" outlined>
             <template v-slot:append>
               <q-select dense borderless v-model="post.ProtectContentLimitMode" :options="[{ label: '以内', value: 1 }, { label: '以外', value: 2 }]" emit-value map-options />
             </template>
@@ -96,7 +96,7 @@
       </div>
       <div class="row">
         <div class="col-3">
-          <q-input dense autogrow v-model="post.Redirect" label="跳转到第三方链接" placeholder="如：https://baidu.com 留空不跳转" outlined hint="当跳转第三方链接时，文章内容不宜过多" />
+          <q-input dense autogrow v-model="post.Redirect" label="跳转到第三方链接" shadow-text="如：https://baidu.com 留空不跳转" outlined hint="当跳转第三方链接时，文章内容不宜过多" />
         </div>
         <div class="col-3">
           <q-input dense v-model="post.ExpireAt" label="过期时间" outlined readonly>
@@ -141,15 +141,9 @@
           </q-input>
         </div>
       </div>
-    </q-card-section>
-  </q-card>
-  <!-- 地区投放设置 -->
-  <q-card flat bordered class="q-mb-md">
-    <q-card-section>
-      <div class="text-h6">按地区投放</div>
       <div class="row q-gutter-md">
         <div class="col">
-          <q-select dense v-model="post.LimitMode" :options="limitModeOptions" label="投放模式" outlined map-options emit-value />
+          <q-select dense v-model="post.LimitMode" :options="limitModeOptions" label="文章地区投放" outlined map-options emit-value></q-select>
         </div>
         <div v-if="post.LimitMode > 0 && post.LimitMode < 5" class="col">
           <q-select dense v-model="post.Regions" :options="filteredRegions" :label="post.LimitMode % 2 === 1 ? '可见地区' : '不可见地区'" :label-color="post.LimitMode % 2 === 1 ? '' : 'red'" outlined use-input new-value-mode="add-unique" input-debounce="0" @filter="filterRegions" @new-value="createNewRegion" hint="竖线分隔，如：江苏|苏州|移动|AS2333|DMIT，支持地区、运营商、ASN、机房名称">

src/Masuit.MyBlogs.Core/wwwroot/Scripts/global/article.js

@@ -286,13 +286,13 @@ createApp({
           message.success(data.Message);
           item.Content = '';
           item.ParentId = null;
+          this.getcomments();
           try {
             window.ue.hasContents() && window.ue.setContent('');
             window.ue2 && window.ue2.hasContents() && window.ue2.setContent('');
           } catch (e) {
             console.error(e);
           }
-          this.getcomments();
         } else {
           message.error(data.Message);
         }
@@ -505,6 +505,7 @@ createApp({
     'pageConfig.page'(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.getcomments();
+        document.querySelector('.comment-form-btn').scrollIntoView({ behavior: 'smooth', block: 'start' });
       }
     },
     'pageConfig.size'(newVal, oldVal) {

src/Masuit.MyBlogs.Core/wwwroot/Scripts/global/leavemsg.js

@@ -307,6 +307,7 @@ createApp({
     'pageConfig.page'(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.getmsgs();
+        document.querySelector('.comment-form-btn').scrollIntoView({ behavior: 'smooth', block: 'start' });
       }
     },
     'pageConfig.size'(newVal, oldVal) {

src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/988.1758960322598.css → src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/175.1759222129699.css

@@ -87,7 +87,7 @@
 }
 
 
-.write-blog-container[data-v-ffcd5686] {
+.write-blog-container[data-v-4afbd643] {
   margin-top: 10px;
 }
 

src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/177.1758960322598.css

@@ -1 +0,0 @@
-.notice-list-page[data-v-6853ac7e]{padding:20px}.text-primary[data-v-6853ac7e]{color:#1976d2;text-decoration:none}.text-primary[data-v-6853ac7e]:hover{text-decoration:underline}.notice-content[data-v-6853ac7e]{max-height:200px;overflow-y:auto;word-wrap:break-word;word-break:break-word;line-height:1.4}.notice-content[data-v-6853ac7e] p{margin:4px 0}.notice-content[data-v-6853ac7e] br{line-height:1.2}.notice-content[data-v-6853ac7e] img{max-width:100%;height:auto}.notice-content[data-v-6853ac7e] a{color:#1976d2;text-decoration:none}.notice-content[data-v-6853ac7e] a:hover{text-decoration:underline}.notice-content[data-v-6853ac7e] code{background:#f5f5f5;padding:2px 4px;border-radius:3px;font-family:monospace}.notice-content[data-v-6853ac7e] blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid #ddd;background:#f9f9f9}.limited-row-height[data-v-6853ac7e] .vxe-table--body-wrapper .vxe-body--row{max-height:300px}.limited-row-height[data-v-6853ac7e] .vxe-table--body-wrapper .vxe-body--column{max-height:300px;overflow:hidden}.limited-row-height[data-v-6853ac7e] .vxe-table--body-wrapper .vxe-body--column .vxe-cell{max-height:300px;overflow-y:auto}

src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/525.1758960322598.css → src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/25.1759222129699.css

@@ -1,22 +1,22 @@
 
-.post-list-container[data-v-7b313762] {
+.post-list-container[data-v-08b223d5] {
   padding: 16px;
 }
-.controls-row[data-v-7b313762] {
+.controls-row[data-v-08b223d5] {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
 }
-[data-v-7b313762] .warning-row {
+[data-v-08b223d5] .warning-row {
   background-color: #fff3cd !important;
 }
-.text-red[data-v-7b313762] {
+.text-red[data-v-08b223d5] {
   color: #f56565 !important;
 }
 @media (max-width: 768px) {
-.controls-row[data-v-7b313762] {
+.controls-row[data-v-08b223d5] {
     flex-direction: column;
     align-items: stretch;
 }

src/Masuit.MyBlogs.Core/wwwroot/dashboard/css/500.1759222129699.css

@@ -0,0 +1 @@
+.notice-list-page[data-v-1b4ab516]{padding:20px}.text-primary[data-v-1b4ab516]{color:#1976d2;text-decoration:none}.text-primary[data-v-1b4ab516]:hover{text-decoration:underline}.notice-content[data-v-1b4ab516]{max-height:300px;overflow-y:auto;word-wrap:break-word;word-break:break-word;line-height:1.4}.notice-content[data-v-1b4ab516] p{margin:4px 0}.notice-content[data-v-1b4ab516] br{line-height:1.2}.notice-content[data-v-1b4ab516] img{max-width:100%;height:auto}.notice-content[data-v-1b4ab516] a{color:#1976d2;text-decoration:none}.notice-content[data-v-1b4ab516] a:hover{text-decoration:underline}.notice-content[data-v-1b4ab516] code{background:#f5f5f5;padding:2px 4px;border-radius:3px;font-family:monospace}.notice-content[data-v-1b4ab516] blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid #ddd;background:#f9f9f9}.limited-row-height[data-v-1b4ab516] .vxe-table--body-wrapper .vxe-body--row{max-height:350px}.limited-row-height[data-v-1b4ab516] .vxe-table--body-wrapper .vxe-body--column{max-height:350px;overflow:hidden}.limited-row-height[data-v-1b4ab516] .vxe-table--body-wrapper .vxe-body--column .vxe-cell{max-height:350px;overflow-y:auto}

src/Masuit.MyBlogs.Core/wwwroot/dashboard/index.html

@@ -1,3 +1,3 @@
 <!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script>// 设置UEditor资源路径
       window.UEDITOR_HOME_URL = '/UEditorPlus/';
-      window.UEDITOR_CORS_URL = '/UEditorPlus/';</script><script charset="utf-8" src="/UEditorPlus/ueditor.config.js"></script><script charset="utf-8" src="/UEditorPlus/ueditor.all.js"></script><script charset="utf-8" src="/UEditorPlus/lang/zh-cn/zh-cn.js"></script><script defer="defer" src="/dashboard/js/chunk-vue.1758960322598.js"></script><script defer="defer" src="/dashboard/js/chunk-quasar.1758960322598.js"></script><script defer="defer" src="/dashboard/js/chunk-vendors.1758960322598.js"></script><script defer="defer" src="/dashboard/js/index.1758960322598.js"></script><link href="/dashboard/css/chunk-quasar.1758960322598.css" rel="stylesheet"><link href="/dashboard/css/chunk-vendors.1758960322598.css" rel="stylesheet"><link href="/dashboard/css/index.1758960322598.css" rel="stylesheet"></head><body><div id="app"></div></body></html>
+      window.UEDITOR_CORS_URL = '/UEditorPlus/';</script><script charset="utf-8" src="/UEditorPlus/ueditor.config.js"></script><script charset="utf-8" src="/UEditorPlus/ueditor.all.js"></script><script charset="utf-8" src="/UEditorPlus/lang/zh-cn/zh-cn.js"></script><script defer="defer" src="/dashboard/js/chunk-vue.1759222129699.js"></script><script defer="defer" src="/dashboard/js/chunk-quasar.1759222129699.js"></script><script defer="defer" src="/dashboard/js/chunk-vendors.1759222129699.js"></script><script defer="defer" src="/dashboard/js/index.1759222129699.js"></script><link href="/dashboard/css/chunk-quasar.1759222129699.css" rel="stylesheet"><link href="/dashboard/css/chunk-vendors.1759222129699.css" rel="stylesheet"><link href="/dashboard/css/index.1759222129699.css" rel="stylesheet"></head><body><div id="app"></div></body></html>