Merge pull request #93 from terwer/dev

feat:#85 Google插件扩展-当前页面样式问题修复

public/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "思源笔记辅助工具",
-  "version": "1.1.3",
+  "version": "1.0.0",
   "manifest_version": 3,
   "author": "terwer",
-  "description": "思源笔记辅助工具，支持博客式制度浏览，文章发布。",
+  "description": "思源笔记辅助工具，支持博客式只读浏览，多平台文章发布。",
   "background": {
     "service_worker": "background.js"
   },

src/components/blog/themes/default/DefaultHeader.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <el-header class="main-common-header">
     <h1 style="text-align: center;margin-top: 0;">思源笔记发布工具</h1>
-  </div>
+  </el-header>
 </template>
 
 <script lang="ts" setup>
@@ -13,6 +13,11 @@ export default {
 }
 </script>
 
+<style>
+.main-common-header{
+  height: 20px !important;
+}
+</style>
 <style scoped>
 h1{
   color: var(--el-table-text-color);

src/components/blog/themes/default/DefaultIndex.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="common-layout">
     <el-container>
-      <el-header>
-        <DefaultHeader/>
-      </el-header>
+      <DefaultHeader/>
       <el-main>
         <DefaultMain/>
       </el-main>

src/components/blog/themes/default/DefaultMain.vue

@@ -36,13 +36,15 @@
         <!--
         <el-table-column prop="dateCreated" label="发布时间" width="150"/>
         -->
-        <el-table-column align="right" width="250">
+        <el-table-column align="right" width="350">
           <template #header>
             <div style="text-align: center;">操作</div>
           </template>
           <template #default="scope">
             <el-button size="small" @click="handleView(scope.$index, scope.row)">预览</el-button>
-            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">发布</el-button>
+            <el-button size="small" type="primary" @click="handleNewWinView(scope.$index, scope.row)">新窗口预览
+            </el-button>
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">发布</el-button>
             <el-button size="small" type="primary" @click="handleNewWinEdit(scope.$index, scope.row)">新窗口发布
             </el-button>
           </template>
@@ -67,7 +69,7 @@
     </div>
 
     <div id="post-detail" v-if="showDetail">
-      <DefaultPostDetail :post="postDetail" @on-change="emitFn"/>
+      <DefaultPostDetail :post="postDetail" @on-change="emitFn" @on-publish-change="emitPublishPageFn"/>
     </div>
 
     <div id="post-publisher" v-if="showPublish">
@@ -184,6 +186,26 @@ const handleView = (index: number, row: any) => {
   showHome.value = false;
   showDetail.value = true;
 }
+const handleNewWinView = (index: number, row: any) => {
+  ElMessageBox.confirm(
+      "预览会打开新页面，此窗口将关闭，是否继续？",
+      t('main.opt.warning'),
+      {
+        confirmButtonText: t('main.opt.ok'),
+        cancelButtonText: t('main.opt.cancel'),
+        type: 'warning',
+      }
+  ).then(async () => {
+    goToPage("/detail/index.html?id=" + row.postid)
+    console.log(index, row)
+  }).catch(() => {
+    // ElMessage({
+    //   type: 'error',
+    //   message: t("main.opt.failure"),
+    // })
+    logUtil.logInfo("操作已取消")
+  });
+}
 
 const emitFn = () => {
   showPublish.value = false;
@@ -196,6 +218,16 @@ const emitPublishBackFn = () => {
   emitFn()
 }
 
+const emitPublishPageFn = (post: Post) => {
+  post.postid = post.postid
+  post.title = post.title
+  publishData.value = post
+
+  showPublish.value = true;
+  showHome.value = false;
+  showDetail.value = false;
+}
+
 const handleEdit = (index: number, row: any) => {
   // goToPage("/index.html?id=" + row.postid)
   // console.log(index, row)

src/components/blog/themes/default/DefaultPostDetail.vue

@@ -10,7 +10,8 @@
 
     <div class="post-detail-content-box">
       <div class="btn-publish">
-        <el-button size="small" type="primary" @click="handlePublish">发布到其他平台</el-button>
+        <el-button size="small" @click="handlePublish">发布到其他平台</el-button>
+        <el-button size="small" type="primary" @click="handleNewWinPublish">新窗口发布到其他平台</el-button>
       </div>
 
       <div class="post-detail-content-box">
@@ -35,13 +36,17 @@ const props = defineProps({
   },
 })
 const emit = defineEmits<{
-  (e: 'on-change'): void
+  (e: 'on-change'): void,
+  (e: 'on-publish-change', post: Post): void
 }>()
 
 const onBack = () => {
   emit("on-change");
 }
-const handlePublish = (e:any) => {
+const handlePublish = (e: any) => {
+  emit('on-publish-change', props.post)
+}
+const handleNewWinPublish = (e: any) => {
   e.preventDefault()
   goToPage("/index.html?id=" + props.post?.postid)
 }

src/components/blog/themes/default/DefaultPublish.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="publish-body">
     <el-page-header class="publish-header" :icon="ArrowLeft" title="返回" @click="onBack">
       <template #content>
         <div class="flex items-center">
@@ -42,4 +42,7 @@ export default {
 .publish-header{
   margin-bottom: 16px;
 }
+#publish-body {
+  min-width: 600px !important;
+}
 </style>

src/components/tab/ChangeLocale.vue

@@ -10,12 +10,9 @@
 
       <el-form-item :label="$t('theme.mode.choose')">
         <!-- 暗黑模式 -->
-        <div class="dark-mode-choose">
-          <button @click="toggleDark()">
-            <i inline-block align-middle i="dark:carbon-moon carbon-sun"/>
-            <span class="ml-2">{{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}</span>
-          </button>
-        </div>
+        <el-button type="primary" @click="toggleDark()">
+          {{ isDark ? $t('theme.mode.light') : $t('theme.mode.dark') }}
+        </el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -61,29 +58,4 @@ export default {
 </script>
 
 <style scoped>
-.dark-mode-choose button {
-  --custom-mode-btn-color: #ffffff;
-  --custom-mode-btn-bg-color: #44bd87;
-  --custom-mode-btn-border-color: #44bd87;
-}
-
-html.dark .dark-mode-choose button {
-  --custom-mode-btn-color: #ffffff;
-  --custom-mode-btn-bg-color: #44bd87;
-  --custom-mode-btn-border-color: #44bd87;
-}
-
-.dark-mode-choose button {
-  padding: 3px 10px;
-  background-color: var(--custom-mode-btn-bg-color);
-  border: none;
-  outline: none;
-  color: var(--custom-mode-btn-color);
-  border: 1px solid var(--custom-mode-btn-border-color);
-  text-shadow: 1px 1px 1px var(--custom-mode-btn-border-color);
-  border-radius: 4px;
-  font-size: 1rem;
-  box-sizing: border-box;
-  vertical-align: middle;
-}
 </style>

src/components/tab/DynamicPlantform.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-header height="250px">
+    <el-header height="250px" class="publish-dyn-header">
       <el-form label-width="180px" ref="formRef" :model="formData" :rules="rules">
         <el-alert class="top-version-tip" :title="$t('dynamic.platform.tip')" type="info" :closable="false"/>
 
@@ -47,6 +47,7 @@
       </el-form-item>
 
       <el-table :data="tableData" :key="num" border stripe highlight-current-row
+                empty-text="暂无数据"
                 @current-change="handleCurrentChange">
         <el-table-column prop="plantformType" :label="$t('dynamic.platform.type')"/>
         <el-table-column prop="plantformKey" :label="$t('dynamic.platform.key')"/>
@@ -217,5 +218,4 @@ export default {
 </script>
 
 <style scoped>
-
 </style>

src/components/tab/main/VuepressMain.vue

@@ -1,6 +1,6 @@
 <template>
   <el-container>
-    <el-aside width="45%">
+    <el-aside width="45%" class="p-aside">
       <el-alert class="top-version-tip" :title="$t('main.publish.vuepress.tip')" type="info" :closable="false"/>
       <el-alert class="top-version-tip" :title="$t('main.publish.vuepress.error.tip')" type="error" :closable="false"
                 v-if="false"/>
@@ -141,12 +141,14 @@
         </el-form-item>
 
         <!-- 发布操作 -->
-        <el-form-item label="">
+        <el-form-item>
           <el-button type="primary" @click="doPublish" :loading="isPublishLoading">{{
               isPublishLoading ? $t('main.publish.loading') :
                   isPublished ? $t('main.update') : $t('main.publish')
             }}
           </el-button>
+        </el-form-item>
+        <el-form-item>
           <el-button @click="cancelPublish" :loading="isCancelLoading">{{ $t('main.cancel') }}</el-button>
         </el-form-item>
 
@@ -163,7 +165,7 @@
     <el-main>
       <el-form label-width="75px">
         <el-form-item>
-          {{ $t('main.yaml.formatter') }}
+          <el-alert class="top-data-tip" :title="$t('main.yaml.formatter')" type="info" :closable="false"/>
         </el-form-item>
         <el-form-item>
           <el-input v-model="vuepressData.vuepressFullContent" :autosize="{ minRows: 5, maxRows: 8 }"
@@ -844,4 +846,7 @@ export default {
 </script>
 
 <style scoped>
+.p-aside{
+  overflow-x: hidden;
+}
 </style>

src/pages/blog/style.css

@@ -53,8 +53,4 @@ body {
 
 .el-alert {
   margin-top: 10px !important;
-}
-
-.el-header{
-  --el-header-height: 20px !important;
 }

src/pages/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>思源笔记辅助工具 - 文章发布</title>
+    <title>思源笔记辅助工具 - 多平台文章发布</title>
   </head>
   <body>
     <div id="app"></div>