feat: add element-plus support

packages/picgo-plugin-app/.gitignore

@@ -25,4 +25,5 @@ components.d.ts
 *.njsproj
 *.sln
 *.sw?
-coverage
+coverage
+auto-imports.d.ts

packages/picgo-plugin-app/package.json

@@ -15,13 +15,18 @@
     "minimist": "^1.2.5",
     "rollup-plugin-livereload": "^2.0.5",
     "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.6",
     "vite-plugin-html": "^3.2.2",
     "vitest": "^1.3.1",
     "vue-tsc": "^2.0.6"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.9.0",
+    "element-plus": "^2.6.1",
+    "lodash-es": "^4.17.21",
     "vue": "^3.4.21",
     "vue-i18n": "^9.10.1",
     "vue-router": "^4.3.0",

packages/picgo-plugin-app/src/App.vue

@@ -15,4 +15,12 @@
 
 <script setup lang="ts">
 import AppLayout from "@/layouts/AppLayout.vue"
+
+// element-plus style
+import "element-plus/dist/index.css"
+import "element-plus/theme-chalk/dark/css-vars.css"
+
+// global style
+import "~/src/assets/style.css"
+import "~/src/assets/style.dark.css"
 </script>

packages/picgo-plugin-app/src/assets/style.css

@@ -0,0 +1,189 @@
+/*
+ * Copyright (c) 2022-2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+@import "./webfont.css";
+
+html {
+  /*filter: grayscale(1);*/
+  --el-font-family: var(--g-font-family) !important;
+  --custom-app-color: #161616;
+  --custom-app-bg-color: #ffffff;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: 100%;
+  height: 97.5%;
+}
+
+#app {
+  color: var(--custom-app-color);
+  background: var(--custom-app-bg-color);
+  padding: 10px 0;
+  min-width: 600px;
+  min-height: 99%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+:root {
+  --g-font-family: "Open Sans", "LXGW WenKai", "JetBrains Mono", "-apple-system", "Microsoft YaHei", "Times New Roman",
+    "方正北魏楷书_GBK";
+  font-family: var(--g-font-family) !important;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+/* Mono font (optional) */
+pre,
+code {
+  font-family: var(--g-font-family) !important;
+  tab-size: 4;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
+
+/* common */
+.pull-right {
+  float: right;
+}
+
+/* util */
+.disabled-click {
+  pointer-events: none;
+}
+
+/* table */
+.post-detail-content-box table {
+  font-family: var(--g-font-family);
+  font-size: 14px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+  margin-top: 10px;
+}
+
+.post-detail-content-box table th {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #dedede;
+}
+
+.post-detail-content-box table td {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #ffffff;
+}
+
+.top-version-tip {
+  margin: 10px 0 !important;
+}
+
+.el-header {
+  --el-header-padding: 0 20px;
+  --el-header-height: 20px !important;
+}
+
+.el-tag {
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.el-alert {
+  margin-top: 10px !important;
+}
+
+.el-card__body {
+  text-align: left !important;
+  --el-card-padding: 10px;
+}
+
+.el-dialog {
+  --el-dialog-width: 88% !important;
+  --el-dialog-margin-top: 10vh;
+  margin: var(--el-dialog-margin-top, 15vh) auto 0 5.5%;
+  text-align: left !important;
+}
+
+.el-dialog__header {
+  text-align: left !important;
+}
+
+.el-dialog__body {
+  padding-bottom: 10px !important;
+}
+
+.dialog-action {
+  margin: calc(var(--el-dialog-padding-primary) + 16px) var(--el-dialog-padding-primary);
+  margin-bottom: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+  margin-right: 0;
+}
+
+.dialog-action .el-form-item {
+  margin-bottom: 0 !important;
+}
+
+.dialog-action .el-form-item__content {
+  justify-content: flex-end;
+}
+
+.dialog-action .el-form-item__content .el-button {
+  margin-left: 10px;
+}
+
+.pic-manage-btn {
+  margin-left: 10px;
+}
+.pic-manage-btn svg {
+  margin-right: 5px;
+}

packages/picgo-plugin-app/src/assets/style.dark.css

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2022-2023, Terwer . All rights reserved.
+ * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
+ *
+ * This code is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License version 2 only, as
+ * published by the Free Software Foundation.  Terwer designates this
+ * particular file as subject to the "Classpath" exception as provided
+ * by Terwer in the LICENSE file that accompanied this code.
+ *
+ * This code is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
+ * version 2 for more details (a copy is included in the LICENSE file that
+ * accompanied this code).
+ *
+ * You should have received a copy of the GNU General Public License version
+ * 2 along with this work; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ *
+ * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com
+ * or visit www.terwer.space if you need additional information or have any
+ * questions.
+ */
+
+html.dark {
+  /* 自定义深色背景颜色 */
+  --custom-app-color: #ffffff;
+  --custom-app-bg-color: #000000;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+html.dark .post-detail-content-box .hljs {
+  color: #ffffff;
+  background-color: #161616 !important;
+  border: 1px solid #ccc !important;
+}
+
+/* dark table */
+html.dark .post-detail-content-box table {
+  color: #ffffff;
+  border-color: #ccc;
+}
+
+html.dark .post-detail-content-box table th {
+  border-color: #ccc;
+  background-color: #161616;
+}
+
+html.dark .post-detail-content-box table td {
+  border-color: #ccc;
+  background-color: #161616;
+}
+
+html.dark .el-header h1 {
+  --custom-title-text-color: #ffffff;
+}
+
+html.dark .el-page-header__left {
+  color: #ffffff;
+}
+
+html.dark .post-detail-content-box {
+  color: #ffffff;
+}
+
+/** dark code */
+html.dark .post-detail-content-box .hljs {
+  color: #ffffff;
+  background-color: #161616 !important;
+  border: 1px solid #ccc !important;
+}
+
+html.dark code {
+  color: #2fd945 !important;
+}
+
+html.dark .hljs-keyword,
+html.dark .hljs-selector-tag,
+html.dark .hljs-built_in,
+html.dark .hljs-name,
+html.dark .hljs-tag {
+  color: #539dc5 !important;
+}
+
+html.dark .post-detail-content-box .hljs-string,
+html.dark .post-detail-content-box .hljs-title,
+html.dark .post-detail-content-box .hljs-section,
+html.dark .post-detail-content-box .hljs-attribute,
+html.dark .post-detail-content-box .hljs-literal,
+html.dark .post-detail-content-box .hljs-template-tag,
+html.dark .post-detail-content-box .hljs-template-variable,
+html.dark .post-detail-content-box .hljs-type,
+html.dark .post-detail-content-box .hljs-addition {
+  color: #2fd945 !important;
+}
+
+html.dark .language-math {
+  color: #ffffff;
+  background: var(--custom-app-bg-color);
+}