Skip to content

Commit

Permalink
feat: 在线分享第一版-优化分享页面
Browse files Browse the repository at this point in the history
  • Loading branch information
terwer committed Jun 19, 2023
1 parent 23dff9b commit 61700b4
Show file tree
Hide file tree
Showing 14 changed files with 266 additions and 25 deletions.
1 change: 1 addition & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ module.exports = {
semi: "off",
quotes: "off",
"no-undef": "off",
"no-extra-boolean-cast":"off",
"vue/multi-word-component-names": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-var-requires": "off",
Expand Down
1 change: 1 addition & 0 deletions docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## SSR

```
http://localhost:3000/share?id=aaa&origin=ddd&isSsr=false
http://localhost:3000/s/20230411223531-n81ogbh
```

Expand Down
11 changes: 11 additions & 0 deletions locales/en_US.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,15 @@ export default {
"siyuan.theme.light": "Light theme",
"siyuan.theme.dark": "Dark theme",
"siyuan.theme.select": "Select theme",
"share.to.web": "Share to web",
"share.to.web.before.tip": "Publish and share link to everyone",
"share.to.web.after.tip": "Anyone with the link can view",
"share.copy.web.link": "Copy web link",
"share.show.link.option": "Show link options",
"share.other.option": "Set other options here",
"share.other.option.link.expires": "Allow link expires",
"share.link.expires.time.placeholder":
"If this feature is enabled, you can set the link expiration time, unit/second, and support up to 7 days",
"share.help": "Learn about sharing",
"share.copy.link": "Copy link",
}
10 changes: 10 additions & 0 deletions locales/zh_CN.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,4 +68,14 @@ export default {
"siyuan.theme.light": "浅色主题",
"siyuan.theme.dark": "暗色主题",
"siyuan.theme.select": "请选择主题",
"share.to.web": "在线分享",
"share.to.web.before.tip": "向所有人发布和共享链接",
"share.to.web.after.tip": "知道链接的任何人都可以查看",
"share.copy.web.link": "复制网页链接",
"share.show.link.option": "显示链接选项",
"share.other.option": "在此处设置其他选项",
"share.other.option.link.expires": "允许链接过期",
"share.link.expires.time.placeholder": "若开启此功能,可设置链接过期时间,单位/秒,若开启最多支持7天",
"share.help": "了解共享",
"share.copy.link": "复制链接",
}
8 changes: 7 additions & 1 deletion nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineNuxtConfig({
},

devtools: {
enabled: true,
enabled: false,
},

// build modules
Expand Down Expand Up @@ -51,6 +51,12 @@ export default defineNuxtConfig({
plugins: [],
},

elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand Down
8 changes: 7 additions & 1 deletion nuxt.node.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineNuxtConfig({
},

devtools: {
enabled: true,
enabled: false,
},

// build modules
Expand Down Expand Up @@ -51,6 +51,12 @@ export default defineNuxtConfig({
plugins: [],
},

elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand Down
8 changes: 7 additions & 1 deletion nuxt.siyuan.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineNuxtConfig({
},

devtools: {
enabled: true,
enabled: false,
},

// build modules
Expand Down Expand Up @@ -58,6 +58,12 @@ export default defineNuxtConfig({
plugins: [],
},

elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

// https://nuxt.com/docs/guide/going-further/custom-routing#hash-mode-spa
ssr: false,
router: {
Expand Down
8 changes: 7 additions & 1 deletion nuxt.vercel.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineNuxtConfig({
},

devtools: {
enabled: true,
enabled: false,
},

// build modules
Expand Down Expand Up @@ -51,6 +51,12 @@ export default defineNuxtConfig({
plugins: [],
},

elementPlus: {
icon: "ElIcon",
importStyle: "scss",
themes: ["dark"],
},

css: ["~/assets/siyuan/style.styl", "~/assets/siyuan/index.styl"],

app: {
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"@terwer/eslint-config-custom": "^1.3.6",
"@types/node": "^18.16.18",
"@vueuse/nuxt": "^10.2.0",
"@vueuse/router": "^10.2.0",
"esbuild-plugin-copy": "^2.1.1",
"esbuild-style-plugin": "^1.6.2",
"minimist": "^1.2.8",
Expand Down
2 changes: 0 additions & 2 deletions pages/about.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ useSeoMeta(seoMeta)
<p>熟悉Java、Spring、Spring Cloud、Vue、React、Python 的拼写</p>
<p>了解 Linux、windows、macOS 的开关机方式</p>
<p>精通 Git 的 pull 和 push,并注册了 GitHub 帐号刷了一些 star</p>
<p>微信公众号:架构设计漫谈</p>
<nuxt-img src="https://img1.terwer.space/mp-qrcode.png" />
<div class="sep"></div>

<h1>✉️ 联系</h1>
Expand Down
46 changes: 46 additions & 0 deletions pages/docs.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!--
- Copyright (c) 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.
-->

<script setup lang="ts">
const title = "帮助文档"
const seoMeta = {
title: title,
ogTitle: title,
} as any
useSeoMeta(seoMeta)
</script>

<template>
<div>
请查看
<nuxt-link
to="https://github.com/terwer/siyuan-plugin-blog/blob/dev/README_zh_CN.md#%E6%A0%B8%E5%BF%83%E7%89%B9%E8%89%B2"
target="_blank"
>帮助文档</nuxt-link
>
</div>
</template>

<style scoped></style>
144 changes: 137 additions & 7 deletions pages/share.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,156 @@
<script setup lang="ts">
import { useSettingStore } from "~/stores/useSettingStore"
import { useRouteQuery } from "@vueuse/router"
const { t } = useI18n()
const { getSetting } = useSettingStore()
const id = useRouteQuery("id", "")
const origin = useRouteQuery("origin", "")
const isSsr = useRouteQuery("isSsr", "")
const basePath = String(isSsr.value) === "true" ? "/plugins/siyuan-blog" : "/plugins/siyuan-blog/#"
const setting = await getSetting()
const title = `${t("blog.share")} - ${t("blog.share.options")}`
const seoMeta = {
title: title,
ogTitle: title,
} as any
useSeoMeta(seoMeta)
// datas
const formData = reactive({
shared: false,
shareLink: `${origin.value}${basePath}/s/${id.value}`,
})
// methods
const goSetting = async () => {
await navigateTo("/setting")
}
const goHelp = async () => {
window.open("https://blog.terwer.space/docs")
}
</script>

<template>
<div>
<el-input />
<el-input />
<el-input />
<el-input />
<el-button></el-button>
<div id="share">
<div class="el-page-header__content share-item">
<div class="flex items-center">
<span class="share-icon">
<el-icon>
<el-icon-chrome-filled />
</el-icon>
</span>
<span class="text-large font-600 mr-3 share-title"> {{ t("share.to.web") }} </span>
<span class="text-sm mr-2 share-description" style="color: var(--el-text-color-regular)">
{{ t("share.to.web.before.tip") }}
</span>
<span class="item-right">
<el-switch v-model="formData.shared" />
</span>
</div>
</div>

<div class="share-item">
<div class="item-left item-copy-link">
<el-input v-model="formData.shareLink" />
</div>
<div class="item-right">
<el-button type="default">{{ t("share.copy.web.link") }}</el-button>
</div>
</div>

<div class="share-item">
<div class="item-left item-copy-link">
<el-space direction="vertical">
<el-text>
{{ t("share.show.link.option") }}
<el-icon>
<el-icon-arrow-down />
</el-icon>
</el-text>
</el-space>
</div>
<div class="item-right"></div>
</div>

<div class="share-item">
<div class="expires-link expires-link-label">
{{ t("share.other.option.link.expires") }}
</div>
<div class="expires-link expires-link-input">
<el-input :placeholder="t('share.link.expires.time.placeholder')" />
</div>
<div class="item-right">
<el-switch />
</div>
</div>

<div class="share-item text-center other-setting">
<div class="item-middle" @click="goSetting">{{ t("share.other.option") }}</div>
</div>

<div class="share-item">
<div class="item-left">
<el-space direction="vertical">
<el-text @click="goHelp">
<el-icon>
<el-icon-help />
</el-icon>
{{ t("share.help") }}
</el-text>
</el-space>
</div>
<!--
<div class="item-right">
<el-button :icon="Share" type="text">{{ t("share.copy.link") }}</el-button>
</div>
-->
</div>
</div>
</template>

<style scoped></style>
<style lang="stylus" scoped>
.text-center
text-align center
#share
.share-item
padding 6px 10px
&:hover, &:focus
cursor pointer
//border-radius 5px
//border-color var(--el-border-color)
//background-color var(--b3-list-hover)
.share-icon
vertical-align middle
font-size 26px
fill rgba(55, 53, 47, 0.35)
.share-title
font-size 16px
.share-description
font-size 12px
.item-left
display inline-block
.item-copy-link
width 90%
::v-deep(.el-space__item)
padding 0 !important
.item-right
display inline-block
float right
.item-middle
display inline-block
background-color transparent
.expires-link
display inline-block
.expires-link-label
margin-right 10px
.expires-link-input
width 84%
.other-setting
border-radius 4px
background-color var(--b3-list-hover)
//background var(--b3-theme-background)
</style>
Loading

0 comments on commit 61700b4

Please sign in to comment.