appcat
/
debian-sources
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

编写界面

master
yutent 2023-08-08 19:09:02 +08:00
parent 723030db85
commit c2a31eb28e
9 changed files with 268 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -3,9 +3,12 @@
一个简单的软件源管理工具, 允许用户自动切换主站软件源(国内镜像地址及debian官方源), 以及自行添加/删除第三方软件源。
![preview](./preview/image.png)
## Build
Build
```
//
```
```

BIN
preview/image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

22
usr/lib/debian-sources/webapp/app.js
View File

@ -7,6 +7,9 @@
import 'es.shim'
import { html, css, Component } from 'wkit'
import './components/sidebar.js'
import './components/official.js'
class App extends Component {
static props = {
input: '',
@ -16,16 +19,25 @@ class App extends Component {
static styles = [
css`
.output {
max-width: 100%;
white-space: pre-wrap;
word-break: break-all;
:host {
display: flex;
width: 100%;
height: 100vh;
}
.app {
display: flex;
width: 100%;
}
`
]
render() {
return html` <h1>it works</h1> `
return html`
<div class="app">
<wc-sidebar></wc-sidebar>
<wc-official></wc-official>
</div>
`
}
quit() {

83
usr/lib/debian-sources/webapp/components/official.js Normal file
View File

@ -0,0 +1,83 @@
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @date 2023/08/08 18:19:17
*/
import { html, css, Component } from 'wkit'
import '@bd/ui/icon/index.js'
import '@bd/ui/space/index.js'
import '@bd/ui/form/input.js'
import '@bd/ui/form/switch.js'
import '@bd/ui/form/button.js'
class Official extends Component {
static props = {
foo: ''
}
static styles = [
css`
:host {
flex: 1;
}
.main {
width: 100%;
height: 100%;
padding: 32px;
color: var(--color-dark-1);
background: #f0f0f0;
}
wc-input {
flex: 1;
}
wc-button {
width: 100%;
}
.card {
width: 100%;
padding: 12px;
margin: 0 auto 24px;
border: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.075);
background: #fff;
}
legend {
-webkit-touch-callout: none;
user-select: none;
color: var(--color-dark-1);
font-weight: bold;
}
`
]
render() {
return html`
<main class="main">
<fieldset class="card">
<legend>镜像地址</legend>
<wc-space>
<span>主站(bookworm)</span>
<wc-input value="https://mirrors.ustc.edu.cn"></wc-input>
</wc-space>
</fieldset>
<fieldset class="card">
<legend>额外配置</legend>
<wc-space justify>
<span>启用源码源</span>
<wc-switch></wc-switch>
</wc-space>
</fieldset>
<wc-button type="secondary">恢复默认设置</wc-button>
</main>
`
}
}
Official.reg('official')

66
usr/lib/debian-sources/webapp/components/sidebar.js Normal file
View File

@ -0,0 +1,66 @@
/**
* {}
* @author yutent<yutent.io@gmail.com>
* @date 2023/08/08 18:19:17
*/
import { html, css, Component } from 'wkit'
import '@bd/ui/icon/index.js'
class Sidebar extends Component {
static props = {
foo: ''
}
static styles = [
css`
.list {
width: 200px;
height: 100%;
border-right: 1px solid var(--color-grey-2);
color: var(--color-dark-1);
}
.item {
display: flex;
align-items: center;
height: 48px;
padding: 0 12px;
--size: 16px;
}
.item:hover {
background: var(--color-plain-1);
}
.item.active {
background: var(--color-blue-1);
color: #fff;
}
wc-icon {
margin-right: 6px;
}
`
]
render() {
return html`
<ul class="list">
<li class="item active">
<wc-icon name="home"></wc-icon>
<span>官方源</span>
</li>
<li class="item">
<wc-icon name="app"></wc-icon>
<span>第三方源</span>
</li>
<li class="item">
<wc-icon name="key"></wc-icon>
<span>密钥</span>
</li>
</ul>
`
}
}
Sidebar.reg('sidebar')

82
usr/lib/debian-sources/webapp/css/reset.css Normal file
View File

@ -0,0 +1,82 @@
@charset "UTF-8";
/**
*
* @authors yutent (yutent.io@gmail.com)
* @date 2014-10-10 00:45:09
*
* CSS规范
*
* 不能出现大写,以连字符风格命名
*
* 样式规则的出现顺序
* 1 display float position overflow z-index 表示定位/布局的属性
* 2 width height margin padding border 表示盒子模型的属性
* 3 line-height font-size vertical-align text-align user-select outline ....排版相关的属性
* 4 color background opacity cursor ...表示装饰相关的属性
* 5 content list-style quotes ... 内容生成相关的属性
*
*/
* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
::before, ::after {box-sizing: border-box;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;}
img {border: 0;display: inline-block;}
ol,ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;}
::-moz-focus-inner {border: none;outline: none;}
body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;}
code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;}
[anot],[\:repeat],[\:if] {visibility: hidden;}
.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;}
.noselect img, .noselect a {-webkit-user-drag: none;}
.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
:root {
/* primary */
--color-teal-a: rgba(72, 201, 176, 0.35);
--color-teal-1: rgb(72, 201, 176);
--color-teal-2: rgb(26, 188, 156);
--color-teal-3: rgb(22, 160, 133);
/* success */
--color-green-a: rgba(70, 221, 126, 0.35);
--color-green-1: rgb(70, 221, 126);
--color-green-2: rgb(47, 208, 105);
--color-green-3: rgb(26, 196, 88);
/* info */
--color-blue-a: rgba(100, 181, 246, 0.35);
--color-blue-1: rgb(100, 181, 246);
--color-blue-2: rgb(66, 165, 245);
--color-blue-3: rgb(33, 150, 243);
/* danger */
--color-red-a: rgba(252, 118, 97, 0.35);
--color-red-1: #fc7661;
--color-red-2: #ff5f45;
--color-red-3: #f33e22;
/* warning */
--color-orange-a: rgba(254, 174, 117, 0.35);
--color-orange-1: #feae75;
--color-orange-2: #fd964b;
--color-orange-3: #f97316;
/* default1 */
--color-plain-a: rgba(150, 204, 248, 0.35);
--color-plain-1: rgb(242, 245, 252);
--color-plain-2: rgb(232, 235, 244);
--color-plain-3: rgb(218, 225, 233);
/* default2 */
--color-grey-a: rgba(206, 214, 224, 0.35);
--color-grey-1: rgb(206, 214, 224);
--color-grey-2: rgb(164, 176, 190);
--color-grey-3: rgb(134, 144, 155);
/* inverse */
--color-dark-a: rgba(100, 116, 139, 0.35);
--color-dark-1: #64748B;
--color-dark-2: #475569;
--color-dark-3: #2c3441;
}

20
usr/lib/debian-sources/webapp/index.html
View File

@ -4,21 +4,31 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/css/reset.css">
<style>
html,body {
width:100%;
height: 100%;
line-height: 1.5;
font-size: 14px;
cursor:default;
}
a {color:inherit;text-decoration: none;}
</style>
<script type="importmap">
{
"imports":{
"es.shim":"app:///lib/es.shim.js",
"wkit":"app:///lib/wkit.js",
"fetch":"app:///lib/fetch.js",
"crypto":"app:///lib/crypto.js"
"crypto":"app:///lib/crypto.js",
"@bd/ui/":"https://jscdn.ink/@bd/ui/latest/"
}
}
</script>
<script type="module" src="/app.js"></script>
</head>
<body>
<wc-app></wc-app>
<body class="noselect">
<wc-app></wc-app>
</body>
</html>

2
usr/lib/debian-sources/webengine/_settings.py
View File

@ -46,8 +46,6 @@ class Settings(WebKit2.Settings):
self.set_disable_web_security(disable_security)
print('<><><><>', os.environ.get('RUN_ENV'))
if os.environ.get('RUN_ENV') == 'development':
self.set_enable_developer_extras(True)
# 是用于启用或禁用模拟捕获设备的设置选项。

2
usr/lib/debian-sources/window.py
View File

@ -7,7 +7,7 @@ gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
class Window(Gtk.Window):
def __init__(self, title = 'Untitled window', width = 800, height = 600):
def __init__(self, title = 'Untitled window', width = 800, height = 480):
Gtk.Window.__init__(self, title = title)
self.set_default_size(width, height)