Skip to content

Commit

Permalink
Merge pull request #296 from terwer/dev
Browse files Browse the repository at this point in the history
feat: add element-plus support
  • Loading branch information
terwer committed Mar 14, 2024
2 parents 906c49f + 6ab4d7c commit 86aee84
Show file tree
Hide file tree
Showing 9 changed files with 1,522 additions and 6 deletions.
3 changes: 2 additions & 1 deletion packages/picgo-plugin-app/.gitignore
Expand Up @@ -25,4 +25,5 @@ components.d.ts
*.njsproj
*.sln
*.sw?
coverage
coverage
auto-imports.d.ts
5 changes: 5 additions & 0 deletions packages/picgo-plugin-app/package.json
Expand Up @@ -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",
Expand Down
8 changes: 8 additions & 0 deletions packages/picgo-plugin-app/src/App.vue
Expand Up @@ -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>
189 changes: 189 additions & 0 deletions 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;
}
110 changes: 110 additions & 0 deletions 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);
}
26 changes: 26 additions & 0 deletions packages/picgo-plugin-app/src/assets/vue.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 86aee84

Please sign in to comment.