feat:#158 使用体验优化

terwer · Nov 20, 2022 · 69b0f4b · 69b0f4b
1 parent a0d70b2
commit 69b0f4b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -91,4 +91,10 @@ body {
 
 .el-alert {
   margin-top: 10px !important;
+}
+
+.el-dialog{
+  --el-dialog-width: 88% !important;
+  --el-dialog-margin-top: 10vh;
+  margin: var(--el-dialog-margin-top,15vh) auto 0 5.5%;
 }
diff --git a/src/components/blog/themes/default/DefaultFooter.vue b/src/components/blog/themes/default/DefaultFooter.vue
@@ -21,11 +21,14 @@
             </el-form-item>
             <el-form-item :label="$t('setting.blog.middlewareUrl')" :label-width="formLabelWidth" prop="middlewareUrl">
               <el-input v-model="siyuanApiChangeForm.middlewareUrl" autocomplete="off" :placeholder="$t('setting.blog.middlewareUrl.tip')"/>
-              <el-alert class="top-data-tip" :title="$t('setting.blog.middlewareUrl.my.tip')" type="success" :closable="false"/>
+            </el-form-item>
+            <el-form-item>
+              <el-alert class="top-data-tip middleware-tip" :title="$t('setting.blog.middlewareUrl.my.tip')" type="success" :closable="false"/>
             </el-form-item>
           </el-form>
 
           <template #footer>
+
             <span class="dialog-footer">
               <el-button @click="siyuanApiChangeFormVisible = false">{{ $t('main.opt.cancel') }}</el-button>
               <el-button type="primary" @click="handleSiyuanApiSetting(siyuanApiSettingFormRef)">{{ $t('main.opt.ok') }}</el-button>
@@ -127,4 +130,8 @@ export default {
   color: var(--el-color-primary);
   cursor: pointer;
 }
+
+.middleware-tip{
+  text-align: left;
+}
 </style>
diff --git a/src/components/blog/themes/default/DefaultMain.vue b/src/components/blog/themes/default/DefaultMain.vue
@@ -32,7 +32,7 @@
         <!--
         <el-table-column prop="postid" label="ID" width="200"/>
         -->
-        <el-table-column prop="title" label="标题"/>
+        <el-table-column prop="shortTitle" label="标题"/>
         <!--
         <el-table-column prop="dateCreated" label="发布时间" width="150"/>
         -->
@@ -91,6 +91,7 @@ import DefaultPublish from "./DefaultPublish.vue";
 import {goToPage} from "../../../../lib/browser/ChromeUtil";
 import {ElMessageBox} from "element-plus";
 import {getWidgetId} from "../../../../lib/platform/siyuan/siyuanUtil";
+import {getByLength} from "../../../../lib/strUtil";
 
 const {t} = useI18n()
 
@@ -291,7 +292,7 @@ const reloadTableData = async () => {
     let item = postList[i]
 
     let title = removeTitleNumber(item.title)
-    let shortTitle = title
+    let shortTitle = getByLength(title,10,false)
     let content = mdToHtml(item.description)
 
     const tableRow = {

diff --git a/src/components/blog/themes/default/DefaultPostDetail.vue b/src/components/blog/themes/default/DefaultPostDetail.vue
@@ -3,7 +3,7 @@
     <el-page-header :icon="ArrowLeft" title="返回" @click="onBack">
       <template #content>
         <div class="flex items-center">
-          <span class="text-large font-600 mr-3"> {{ post.title }} </span>
+          <span class="text-large font-600 mr-3" :title="post.title"> {{ shortTitle }} </span>
         </div>
       </template>
     </el-page-header>
@@ -25,6 +25,7 @@ import {Post} from "../../../../lib/common/post";
 import {ArrowLeft} from '@element-plus/icons-vue'
 import {goToPage} from "../../../../lib/browser/ChromeUtil";
 import DefaultPostDetailService from "./DefaultPostDetailService.vue";
+import {getByLength} from "../../../../lib/strUtil";
 
 const props = defineProps({
   post: {
@@ -37,6 +38,8 @@ const emit = defineEmits<{
   (e: 'on-publish-change', post: Post): void
 }>()
 
+const shortTitle = getByLength(props.post?.title,10,false)
+
 const onBack = () => {
   emit("on-change");
 }

diff --git a/src/lib/strUtil.ts b/src/lib/strUtil.ts
@@ -7,4 +7,22 @@ export const unescapeHTML = function (a: string) {
     a = "" + a;
     return a.replace(/\&amp;/g, "&").replace(/\&lt;/g, "<")
         .replace(/\&gt;/g, ">")
+}
+
+/**
+ * 截取指定长度的字符串
+ * @param str str
+ * @param length 长度
+ * @param ignore 不要结尾省略号
+ * @returns {string} 结果
+ */
+export function getByLength(str: string, length: number, ignore?: boolean) {
+    let allText = str;
+    if (allText.length < length) {
+        return allText;
+    }
+    if (ignore) {
+        return allText.substring(0, length);
+    }
+    return allText.substring(0, length) + "...";
 }
diff --git a/src/locales/zh_CN.ts b/src/locales/zh_CN.ts
@@ -193,5 +193,5 @@ export default {
     "setting.blog.siyuan.current.apiurl": "当前API地址=>",
     "setting.blog.middlewareUrl": "跨域请求代理",
     "setting.blog.middlewareUrl.tip": "某些场景下需要（例如Firefox插件、自部署模式），其他情况可忽略",
-    "setting.blog.middlewareUrl.my.tip": "如果没有可以使用我的：https://publish.terwer.space/api/middleware",
+    "setting.blog.middlewareUrl.my.tip": "如果没有部署代理，可以使用我的共享地址：https://publish.terwer.space/api/middleware 。出于性能考虑，建议自己部署一份。",
 }