feat: setting page
This commit is contained in:
DIYgod
parent
8dcb0b81e9
commit
289f3e4226
|
|
@ -93,7 +93,7 @@ body {
|
|||
border: 1px solid #FF8549;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
transition: .2s;
|
||||
transition: .3s;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
export default {
|
||||
rsshubDomain: 'https://rsshub.app',
|
||||
notice: {
|
||||
badge: true,
|
||||
},
|
||||
submitto: {
|
||||
ttrss: false,
|
||||
ttrssDomain: '',
|
||||
feedly: false,
|
||||
inoreader: false,
|
||||
}
|
||||
}
|
||||
|
|
@ -13,11 +13,15 @@
|
|||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">设置</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/list">
|
||||
<i class="el-icon-magic-stick"></i>
|
||||
<span slot="title">支持列表</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/about">
|
||||
<i class="el-icon-coordinate"></i>
|
||||
<span slot="title">关于</span>
|
||||
</el-menu-item>
|
||||
<el-footer class="footer">@DIYgod</el-footer>
|
||||
<el-footer class="footer">版本 v{{ version }}<br>© 2019 <a href="https://diygod.me">DIYgod</a></el-footer>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
|
|
@ -36,6 +40,9 @@ export default {
|
|||
components: {
|
||||
HelloWorld
|
||||
},
|
||||
data: () => ({
|
||||
version: VERSION,
|
||||
}),
|
||||
methods: {
|
||||
handleSelect(key, keyPath) {
|
||||
this.$router.push(key);
|
||||
|
|
@ -88,6 +95,28 @@ body {
|
|||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: @color-primary;
|
||||
color: #999;
|
||||
line-height: 25px;
|
||||
|
||||
a {
|
||||
color: @color-primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
i,
|
||||
span {
|
||||
transition: color .3s;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
color: #303133;
|
||||
|
||||
i,
|
||||
span {
|
||||
color: #f5712c;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import '../../css/options.scss'
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './App.vue';
|
||||
import Setting from './views/Setting.vue';
|
||||
import List from './views/List.vue';
|
||||
import About from './views/About.vue';
|
||||
import { Container, Menu, MenuItem, Aside, Header, Main, Footer } from 'element-ui';
|
||||
import '../../css/options.scss'
|
||||
import { Container, Menu, MenuItem, Aside, Header, Main, Footer, Input, Checkbox, Message, Loading } from 'element-ui';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(Container);
|
||||
|
|
@ -14,11 +15,18 @@ Vue.use(Aside);
|
|||
Vue.use(Header);
|
||||
Vue.use(Main);
|
||||
Vue.use(Footer);
|
||||
Vue.use(Input);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$message = Message;
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect: '/setting' },
|
||||
{ path: '/setting', component: Setting },
|
||||
{ path: '/list', component: List },
|
||||
{ path: '/about', component: About },
|
||||
];
|
||||
const router = new VueRouter({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,40 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
About
|
||||
</div>
|
||||
</template>
|
||||
<div class="about">
|
||||
<el-main>
|
||||
<div class="title">关于</div>
|
||||
<div class="content">
|
||||
未完成的功能
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'About',
|
||||
data: () => ({
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.about {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding-bottom: 10px;
|
||||
color: #f5712c;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
color: #222;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="list">
|
||||
<el-main>
|
||||
<div class="title">支持列表</div>
|
||||
<div class="content">
|
||||
未完成的功能
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'List',
|
||||
data: () => ({
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding-bottom: 10px;
|
||||
color: #f5712c;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
color: #222;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,21 +1,112 @@
|
|||
<template>
|
||||
<div class="setting">
|
||||
<el-main>Setting</el-main>
|
||||
</div>
|
||||
<div class="setting">
|
||||
<el-main>
|
||||
<div class="title">设置</div>
|
||||
<div class="content" v-loading="loading">
|
||||
<div class="subtitle">常规</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-name">自定义 RSSHub 域名</div>
|
||||
<div class="setting-input">
|
||||
<el-input @change="saveConfig" v-model="config.rsshubDomain" placeholder="请输入你的 RSSHub 域名，留空使用官方域名"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle">通知与提醒</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-name">角标提醒</div>
|
||||
<div class="setting-input">
|
||||
<el-checkbox @change="saveConfig" v-model="config.notice.badge">开启</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subtitle">一键订阅</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-name">Tiny Tiny RSS</div>
|
||||
<div class="setting-input">
|
||||
<el-checkbox @change="saveConfig" v-model="config.submitto.ttrss">开启</el-checkbox>
|
||||
<el-input @change="saveConfig" style="margin-left: 20px;" v-if="config.submitto.ttrss" v-model="config.submitto.ttrssDomain" placeholder="必填，请输入你的 Tiny Tiny RSS 地址"></el-input>
|
||||
</div>
|
||||
<div class="setting-name">Feedly</div>
|
||||
<div class="setting-input">
|
||||
<el-checkbox @change="saveConfig" v-model="config.submitto.feedly">开启</el-checkbox>
|
||||
</div>
|
||||
<div class="setting-name">Inoreader</div>
|
||||
<div class="setting-input">
|
||||
<el-checkbox @change="saveConfig" v-model="config.submitto.inoreader">开启</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import defaultConfig from '../../default-config';
|
||||
|
||||
export default {
|
||||
name: 'Setting',
|
||||
data: () => ({
|
||||
loading: true,
|
||||
defaultConfig,
|
||||
config: defaultConfig,
|
||||
}),
|
||||
created() {
|
||||
this.getConfig();
|
||||
},
|
||||
methods: {
|
||||
getConfig() {
|
||||
chrome.storage.local.get('config', (result) => {
|
||||
this.config = Object.assign({}, defaultConfig, result.config);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
saveConfig() {
|
||||
chrome.storage.local.set({
|
||||
config: this.config,
|
||||
}, () => {
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
});
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding-bottom: 10px;
|
||||
color: #f5712c;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-top: 20px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin: 30px 0 15px;
|
||||
}
|
||||
|
||||
.setting-name {
|
||||
font-size: 15px;
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
.setting-input {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
|
@ -166,6 +167,9 @@ module.exports = {
|
|||
},
|
||||
]),
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
VERSION: JSON.stringify(require('./src/assets/manifest.json').version)
|
||||
}),
|
||||
],
|
||||
|
||||
node: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue