大量UI改进

web/public/index.html

@@ -9,7 +9,7 @@
     <meta http-equiv="Pragma" content="no-cache" />
     <meta http-equiv="Expires" content="0" />
     <meta name="apple-mobile-web-app-capable" content="yes"/>
-<!--    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>-->
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
     <meta name="viewport"
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
     <link rel="Bookmark" href="https://raw.githubusercontent.com/58xinian/icon/master/Sub-Store1.png"/>

web/src/assets/css/app.scss

@@ -334,7 +334,7 @@ html, body {
   }
 }
 
-.v-toolbar__title {
+.theme--light.v-toolbar__title {
   font-weight: 300;
   color: #555;
   font-size: 18px;
@@ -360,7 +360,6 @@ html, body {
 
     .v-icon {
       font-size: 20px;
-      color: #555 !important;
       margin-top: -3px;
       top: 0;
       position: relative;
@@ -830,7 +829,6 @@ html, body {
 }
 
 .v-card__title {
-  color: #3c4858;
   font-size: 18px;
   padding-top: 7px;
   padding-bottom: 2px;
@@ -1138,11 +1136,6 @@ html, body {
       padding: 24px 24px 0;
 
       .v-icon {
-        //position: absolute;
-        //top: 15px;
-        //right: 20px;
-        color: #999;
-        opacity: .5;
         font-size: 16px;
 
         &:hover {

web/src/components/ProxyList.vue

@@ -50,11 +50,9 @@
         </v-card-title>
 
         <v-card-text>
-          {{ info.isp }}
+          <h4>{{ info.isp }}</h4>
-          <br/>
+          <h4>{{ info.region }}</h4>
-          {{ info.region }}
+          <h4>{{ info.ip }}</h4>
-          <br/>
-          {{ info.ip }}
         </v-card-text>
       </v-card>
     </v-dialog>

web/src/views/Cloud.vue

@@ -65,11 +65,15 @@
                 </template>
                 <v-list dense>
                   <v-list-item
-                      v-for="(name, idx) in getSources(newArtifact.type)"
+                      v-for="(sub, idx) in getSources(newArtifact.type)"
-                      @click="newArtifact.source = name"
+                      @click="newArtifact.source = sub.name"
                       :key="idx"
                   >
-                    <v-list-item-title>{{ name }}</v-list-item-title>
+                    <v-list-item-avatar>
+                      <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
+                      <v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/>
+                    </v-list-item-avatar>
+                    <v-list-item-title>{{ sub.name }}</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
@@ -90,7 +94,7 @@
                       @click="newArtifact.platform = platform"
                   >
                     <v-list-item-avatar>
-                      <v-img :src="getIcon(platform)"></v-img>
+                      <v-img :src="getIcon(platform)" :class="getIconClass('#invert')"></v-img>
                     </v-list-item-avatar>
                     <v-list-item-title>{{ platform }}</v-list-item-title>
                   </v-list-item>
@@ -114,7 +118,7 @@
       <template v-for="(artifact, idx) in artifacts">
         <v-list-item three-line dense :key="artifact.name">
           <v-list-item-avatar>
-            <v-img :src="getIcon(artifact.platform)"/>
+            <v-img :src="getIcon(artifact.platform)" :class="getIconClass('#invert')"/>
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title>
@@ -201,10 +205,11 @@ export default {
   methods: {
     getIcon(platform) {
       const ICONS = {
-        "Clash": "https://github.com/Dreamacro/clash/raw/master/docs/logo.png",
+        "Clash": "https://raw.githubusercontent.com/58xinian/icon/master/clash_mini.png",
-        "QX": "https://raw.githubusercontent.com/Orz-3/task/master/quantumultx.png",
+        "QX": "https://raw.githubusercontent.com/Orz-3/mini/none/quanX.png",
-        "Surge": "https://raw.githubusercontent.com/Orz-3/task/master/surge.png",
+        "Surge": "https://raw.githubusercontent.com/Orz-3/mini/none/surge.png",
-        "Loon": "https://raw.githubusercontent.com/Orz-3/task/master/loon.png"
+        "Loon": "https://raw.githubusercontent.com/Orz-3/mini/none/loon.png",
+        "ShadowRocket": "https://raw.githubusercontent.com/Orz-3/mini/master/loon.png"
       }
       return ICONS[platform];
     },
@@ -287,12 +292,22 @@ export default {
         case "collection":
           data = this.$store.state.collections;
       }
-      return Object.keys(data);
+      return Object.keys(data).map(k => data[k]);
+    },
+
+    getIconClass(url) {
+      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
     },
 
     openGist() {
-      window.open(`https://gist.github.com${ '/' + this.settings.githubUser || ''}`)
+      window.open(`https://gist.github.com${'/' + this.settings.githubUser || ''}`)
     }
   }
 }
 </script>
+
+<style scoped>
+.invert {
+  filter: invert(100%);
+}
+</style>

web/src/views/SubEditor.vue

@@ -36,7 +36,7 @@
           <v-list-item v-for="sub in availableSubs" :key="sub.name">
             <v-list-item-avatar>
               <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="sub.icon" v-else :class="sub.icon.indexOf('#invert') !== -1 ? 'invert' : ''"/>
+              <v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/>
             </v-list-item-avatar>
             <v-list-item-content>
               {{ sub.name }}
@@ -404,6 +404,9 @@ export default {
     }
   },
   methods: {
+    getIconClass(url) {
+      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
+    },
     save() {
       if (this.isCollection) {
         if (this.options.name && this.selected) {
@@ -570,7 +573,7 @@ function uuidv4() {
 }
 </script>
 
-<style>
+<style scoped>
 .invert {
   filter: invert(100%);
 }

web/src/views/Subscription.vue

@@ -18,7 +18,7 @@
           >
             <v-list-item-avatar>
               <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="sub.icon" v-else :class="sub.icon.indexOf('#invert') !== -1 ? 'invert' : ''"/>
+              <v-img :src="sub.icon" v-else :class="getIconClass(sub.icon)"/>
             </v-list-item-avatar>
 
             <v-list-item-content>
@@ -72,7 +72,7 @@
           >
             <v-list-item-avatar>
               <v-icon v-if="!collection.icon" color="teal darken-1">mdi-cloud</v-icon>
-              <v-img :src="collection.icon" v-else :class="collection.icon.indexOf('#invert') !== -1 ? 'invert' : ''"/>
+              <v-img :src="collection.icon" v-else :class="getIconClass(collection.icon)"/>
             </v-list-item-avatar>
             <v-list-item-content>
               <v-list-item-title v-text="collection.name" class="font-weight-medium"></v-list-item-title>
@@ -123,7 +123,9 @@
           <v-toolbar>
             <v-icon>mdi-cloud</v-icon>
             <v-spacer></v-spacer>
-            <v-toolbar-title><h4>节点列表</h4></v-toolbar-title>
+            <v-toolbar-title class="flex text-xs-center">
+              <h4>节点列表</h4>
+            </v-toolbar-title>
             <v-spacer></v-spacer>
             <v-toolbar-items>
               <v-btn icon @click="refreshProxyList" v-if="sub">
@@ -254,23 +256,10 @@ export default {
     refreshProxyList() {
       this.$refs.proxyList.refresh();
     },
-    moveUpSubscription(name) {
+    getIconClass(url) {
-      let index = 0;
+      return url.indexOf('#invert') !== -1 && !this.$store.state.settings.theme.darkMode ? 'invert' : ''
-      for (; index < this.subscriptions.length; index++) {
-        if (this.subscriptions[index].name === name) {
-          break;
     }
   }
-      if (index === 0) return;
-      // otherwise swap with previous one
-      const prev = this.subscriptions[index - 1];
-      const cur = this.subscriptions[index];
-      this.subscriptions.splice(index - 1, 2, cur, prev);
-    },
-    // moveDownSubscription(name) {
-    //
-    // }
-  }
 }
 </script>
 

web/src/views/User.vue

@@ -88,7 +88,6 @@
         <v-spacer></v-spacer>
         <v-btn small text @click="save()" color="primary">保存</v-btn>
       </v-card-actions>
-      <v-divider/>
     </v-card>
 
     <!--    <v-card>-->