feat: 补充关于面板

2061360308 · Jan 25, 2025 · 56dcf34 · 56dcf34
1 parent 0a41b32
commit 56dcf34
Show file tree

Hide file tree

Showing 9 changed files with 257 additions and 7 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AboutApp: typeof import('./src/components/AboutApp.vue')['default']
     DiffManager: typeof import('./src/components/DiffManager.vue')['default']
     EditingManager: typeof import('./src/components/EditingManager.vue')['default']
     ElAnchor: typeof import('element-plus/es')['ElAnchor']
@@ -26,12 +27,15 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElInputTag: typeof import('element-plus/es')['ElInputTag']
+    ElLinkbutton: typeof import('element-plus/es')['ElLinkbutton']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hugo-editor",
-  "version": "0.0.0",
+  "version": "1.0.1",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/public/cover.png b/public/cover.png
diff --git a/public/img/login_cover.jpg b/public/img/login_cover.jpg
diff --git a/src/components/AboutApp.vue b/src/components/AboutApp.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+const props = defineProps({
+  show: Boolean,
+});
+
+const dialogShow = ref(props.show);
+
+watch(
+  () => props.show,
+  (value) => {
+    dialogShow.value = value;
+  }
+);
+
+watch(
+  () => dialogShow.value,
+  (value) => {
+    emits("update:show", value);
+  }
+);
+
+const emits = defineEmits(["update:show"]);
+
+const updateShowValue = (value: boolean) => {
+  emits("update:show", value);
+};
+
+const appVersion = __APP_VERSION__;
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogShow"
+    title="关于 | About"
+    width="750"
+    align-center
+    destroy-on-close
+  >
+    <div class="content">
+      <div class="info">
+        <el-image class="logo" src="/cover.png" fit="cover" />
+        <div class="desc">
+          <span class="version">版本信息：v{{ appVersion }}</span>
+          <span class="author">作者：盧瞳</span>
+          <span class="email"
+            ><el-button
+              link
+              tag="a"
+              target="_blank"
+              href="mailto:[email protected]"
+              style="color: rgb(140, 195, 249); font-size: 13px"
+              >邮箱：[email protected]</el-button
+            ></span
+          >
+          <span class="homepage"
+            ><el-button
+              link
+              tag="a"
+              target="_blank"
+              href="https://inkstone.work"
+              style="color: rgb(140, 195, 249); font-size: 13px"
+              >官网：https://inkstone.work</el-button
+            ></span
+          >
+          <el-button
+            plain
+            tag="a"
+            target="_blank"
+            href="https://github.com/2061360308/InkStone/discussions"
+            style="color: rgb(50, 145, 240)"
+            >参与讨论</el-button
+          >
+        </div>
+      </div>
+
+      <div class="support">
+        <div class="title">支持我们</div>
+        <el-tabs tab-position="bottom" type="card">
+          <el-tab-pane label="STAR" class="panel">
+            <p>
+              我们的项目发布在Github上，在这里Star代表您对本项目的认可。
+              这也是其他用户对我们第一影响的重要来源，更多的Star意味着项目得到更多的推广，从而让我们获得更多的用户以及愿意参与贡献的开发者。
+              大量用户使用能够帮助我们发现更多潜在的问题，同时更多的开发者参与则能够提升开发和维护的效率，<strong>您最终将从此收益</strong>。
+            </p>
+            <!--  -->
+            <div class="operation">
+              <el-button
+                color="#997f2b"
+                plain
+                tag="a"
+                href="https://github.com/2061360308/InkStone"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <font-awesome-icon
+                  style="color: #e3b341; margin-right: 5px"
+                  :icon="['fas', 'star']"
+                  size="lg"
+                />去点赞 Star
+              </el-button>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="DONATION" class="panel">
+            <p>
+              作为一个开源项目，我们的开发者和维护者是完全自愿的，他们在业余时间为此项目付出了大量的心血。
+              如果您觉得这个项目对您有所帮助，您可以考虑通过捐赠来支持我们，这将是对我们最大的鼓励。
+              您的捐赠将用于支付项目的服务器费用、域名费用、开发者的奖励等。
+            </p>
+            <div class="operation">
+              <el-button
+                color="#995a65"
+                plain
+                tag="a"
+                href="https://github.com/2061360308/InkStone"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <font-awesome-icon
+                  style="color: #cc7888; margin-right: 5px"
+                  :icon="['fas', 'comment-dollar']"
+                  size="lg"
+                />去捐款 Donation
+              </el-button>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="ISSUES" class="panel">
+            <p>
+              开源项目的发展离不开用户的反馈，如果您在使用过程中遇到了问题，或者有任何建议，您可以通过Github的Issues功能来告诉我们。
+              感谢您帮助我们变得更好！
+            </p>
+            <div class="operation">
+              <el-button
+                color="#317dcb"
+                plain
+                tag="a"
+                href="https://github.com/2061360308/InkStone/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <font-awesome-icon
+                  style="color: #3e9dfe; margin-right: 5px"
+                  :icon="['fas', 'square-xmark']"
+                  size="lg"
+                />去反馈 Issue
+              </el-button>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="CONTRIBUTION" class="panel">
+            <p>
+              作为一个开源项目，我们非常欢迎任何人为我们的项目贡献代码，无论是修复Bug，增加新功能，还是改进文档，都是对我们的巨大帮助。
+              <br />您可以通过Fork我们的项目，然后提交Pull Request来贡献代码。
+              <br />感谢您的贡献！
+            </p>
+            <div class="operation">
+              <el-button
+                color="#21aa56"
+                plain
+                tag="a"
+                href="https://github.com/2061360308/InkStone"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <font-awesome-icon
+                  style="color: #2cdd71; margin-right: 5px"
+                  :icon="['fas', 'handshake-angle']"
+                  size="lg"
+                />去贡献 Contribution
+              </el-button>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.info {
+  display: flex;
+  justify-items: space-between;
+}
+.info .logo {
+  height: 150px;
+}
+
+.info .desc {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-end;
+  gap: 5px;
+}
+
+.info .desc .version {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.support {
+  border: var(--el-border-color) solid 2px;
+  border-radius: 5px;
+}
+
+.support .title {
+  font-size: 17px;
+  font-weight: bold;
+  padding: 10px;
+}
+
+.support .panel {
+  padding: 10px;
+  height: 120px;
+}
+
+.support .operation {
+  width: 100%;
+  display: flex;
+  justify-content: end;
+  padding: 10px;
+}
+</style>
diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
@@ -261,10 +261,6 @@ const updateTree = async () => {
     fileTree.value = transformTree(mixed);
 
     loading.value = false;
-    ElMessage({
-      type: "success",
-      message: "文件树已更新",
-    });
   }
 };
 
@@ -349,11 +345,19 @@ const titleBarCreateClick = () => {
     type: "tree",
     data: {
       path: "",
-    }
+    },
   };
   showCreateFileDialog(false, false);
 };
 
+const titleBarUpdateClick = async () => {
+  await updateTree();
+  ElMessage({
+    type: "success",
+    message: "文件树已更新",
+  });
+};
+
 // 删除文件
 const deleteFile = (e: any) => {
   // Todo
@@ -532,7 +536,7 @@ const createFile = () => {
             <font-awesome-icon :icon="['fas', 'file']" size="lg" />
           </template>
         </el-button>
-        <el-button circle @click="updateTree">
+        <el-button circle @click="titleBarUpdateClick">
           <template #icon>
             <font-awesome-icon :icon="['fas', 'arrows-rotate']" size="lg" />
           </template>

diff --git a/src/components/MainApplication.vue b/src/components/MainApplication.vue
@@ -7,6 +7,7 @@ import FileTree from "./FileTree.vue";
 import WorkSpace from "./WorkSpace.vue";
 import DiffManager from "./DiffManager.vue";
 import EditingManager from "./EditingManager.vue";
+import AboutApp from "./AboutApp.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import api from "@/utils/api";
 import { useTabsStore, useSettingsStore } from "@/stores";
@@ -18,6 +19,7 @@ const router = useRouter();
 
 const leftPaneSize = ref(20);
 const activeMenu = ref("files");
+const aboutDialogVisible = ref(false);
 
 onMounted(async () => {
   if (!api.ready) {
@@ -83,6 +85,9 @@ const handleMenuSelect = (index: string) => {
     case Menu.Changes:
       activeMenu.value = Menu.Changes;
       break;
+    case Menu.About:
+      aboutDialogVisible.value = true;
+      break;
     case Menu.Settings:
       tabsStore.addTab(
         tabsStore.TabType.SettingsPanel,
@@ -147,6 +152,7 @@ const handleMenuSelect = (index: string) => {
         <WorkSpace />
       </pane>
     </splitpanes>
+    <AboutApp v-model:show="aboutDialogVisible" />
   </div>
 </template>
 

diff --git a/src/utils/fontAwesomeLibrary.ts b/src/utils/fontAwesomeLibrary.ts
@@ -19,6 +19,7 @@ import {
   faCircleQuestion,
   faClock,
   faCodeBranch,
+  faCommentDollar,
   faCopy,
   faD,
   faFile,
@@ -27,6 +28,7 @@ import {
   faFolder,
   faFolderOpen,
   faGear,
+  faHandshakeAngle,
   faInbox,
   faICursor,
   faKey,
@@ -40,6 +42,8 @@ import {
   faRotateLeft,
   faSquareCheck,
   faSquarePen,
+  faSquareXmark,
+  faStar,
   faTrash,
   faU,
   faWonSign,
@@ -62,6 +66,7 @@ export const initFontAwesomeIcons = () => {
     faCircleQuestion,
     faClock,
     faCodeBranch,
+    faCommentDollar,
     faCopy,
     faD,
     faFile,
@@ -72,6 +77,7 @@ export const initFontAwesomeIcons = () => {
     faGear,
     faInbox,
     faGithub,
+    faHandshakeAngle,
     faICursor,
     faKey,
     faList,
@@ -84,6 +90,8 @@ export const initFontAwesomeIcons = () => {
     faRotateLeft,
     faSquareCheck,
     faSquarePen,
+    faSquareXmark,
+    faStar,
     faTrash,
     faTumblr,
     faU,

diff --git a/vite.config.ts b/vite.config.ts
@@ -8,6 +8,7 @@ import vueDevTools from "vite-plugin-vue-devtools";
 import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
 import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import { version } from './package.json';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -62,6 +63,9 @@ export default defineConfig({
       resolvers: [ElementPlusResolver()],
     }),
   ],
+  define: {
+    __APP_VERSION__: JSON.stringify(version),
+  },
   resolve: {
     extensions: [".js", ".vue", ".json", ".ts"],
     alias: {