编写界面

README.md

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

usr/lib/debian-sources/webapp/app.js

@@ -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 {
+      :host {
-        max-width: 100%;
+        display: flex;
-        white-space: pre-wrap;
+        width: 100%;
-        word-break: break-all;
+        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() {

usr/lib/debian-sources/webapp/components/official.js

@@ -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')

usr/lib/debian-sources/webapp/components/sidebar.js

@@ -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')

usr/lib/debian-sources/webapp/css/reset.css

@@ -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;
+}

usr/lib/debian-sources/webapp/index.html

@@ -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>
+<body class="noselect">
-
+  <wc-app></wc-app>
-<wc-app></wc-app>
-
 </body>
 </html>

usr/lib/debian-sources/webengine/_settings.py

@@ -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)
       # 是用于启用或禁用模拟捕获设备的设置选项。

usr/lib/debian-sources/window.py

@@ -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)