feat: Added support for display name

web/src/views/Cloud.vue

@@ -24,22 +24,14 @@
             </v-subheader>
             <v-divider></v-divider>
             <v-form v-model="formValid" class="pt-4 pl-4 pr-4 pb-0">
-              <v-text-field
+              <v-text-field v-model="currentArtifact.name" :disabled="editing" clear-icon="clear" clearable label="配置名称"
-                  v-model="currentArtifact.name"
+                placeholder="填入生成配置名称，名称需唯一，如Clash.yaml。" />
-                  :disabled="editing"
+              <v-text-field v-model="currentArtifact['display-name']" clear-icon="clear" clearable label="配置显示名称"
-                  clear-icon="clear"
+                placeholder="填入生成配置显示名称，名称无需唯一。" />
-                  clearable
-                  label="配置名称"
-                  placeholder="填入生成配置名称，名称需唯一，如Clash.yaml。"
-              />
               <v-menu offset-y>
                 <template v-slot:activator="{on}">
-                  <v-text-field
+                  <v-text-field v-on="on" :rules="validations.required" :value="getType(currentArtifact.type)"
-                      v-on="on"
+                    label="类型" />
-                      :rules="validations.required"
-                      :value="getType(currentArtifact.type)"
-                      label="类型"
-                  />
                 </template>
                 <v-list dense>
                   <v-list-item @click="setArtifactType('subscription')">
@@ -58,44 +50,29 @@
               </v-menu>
               <v-menu offset-y>
                 <template v-slot:activator="{on}">
-                  <v-text-field
+                  <v-text-field v-model="currentArtifact.source" v-on="on"
-                      v-model="currentArtifact.source"
+                    :placeholder="`填入${getType(currentArtifact.type) || '来源'}的名称。`" :rules="validations.required"
-                      v-on="on"
+                    label="来源" />
-                      :placeholder="`填入${getType(currentArtifact.type) || '来源'}的名称。`"
-                      :rules="validations.required"
-                      label="来源"
-                  />
                 </template>
                 <v-list dense>
-                  <v-list-item
+                  <v-list-item v-for="(sub, idx) in getSources(currentArtifact.type)" :key="idx"
-                      v-for="(sub, idx) in getSources(currentArtifact.type)"
+                    @click="currentArtifact.source = sub.name">
-                      :key="idx"
-                      @click="currentArtifact.source = sub.name"
-                  >
                     <v-list-item-avatar>
                       <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
                       <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon" />
                     </v-list-item-avatar>
-                    <v-list-item-title>{{ sub.name }}</v-list-item-title>
+                    <v-list-item-title>{{ sub['display-name'] || sub.name }}</v-list-item-title>
                   </v-list-item>
                 </v-list>
               </v-menu>
 
               <v-menu offset-y>
                 <template v-slot:activator="{on}">
-                  <v-text-field
+                  <v-text-field v-on="on" :rules="validations.required" :value="currentArtifact.platform" label="目标" />
-                      v-on="on"
-                      :rules="validations.required"
-                      :value="currentArtifact.platform"
-                      label="目标"
-                  />
                 </template>
                 <v-list dense>
-                  <v-list-item
+                  <v-list-item v-for="platform in ['Surge', 'Loon', 'QX', 'Clash']" :key="platform"
-                      v-for="platform in ['Surge', 'Loon', 'QX', 'Clash']"
+                    @click="currentArtifact.platform = platform">
-                      :key="platform"
-                      @click="currentArtifact.platform = platform"
-                  >
                     <v-list-item-avatar>
                       <v-img :class="getIconClass('#invert')" :src="getIcon(platform)"></v-img>
                     </v-list-item-avatar>
@@ -125,7 +102,7 @@
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title>
-              {{ artifact.name }}
+              {{ artifact['display-name'] || artifact.name }}
             </v-list-item-title>
             <v-chip-group>
               <v-chip label>
@@ -192,6 +169,7 @@ export default {
       showArtifactDialog: false,
       currentArtifact: {
         name: "",
+        'display-name': "",
         type: "subscription",
         source: "",
         platform: "",
@@ -286,6 +264,7 @@ export default {
     clear() {
       this.currentArtifact = {
         name: "",
+        'display-name': "",
         type: "subscription",
         source: "",
         platform: ""

web/src/views/SubEditor.vue

@@ -3,8 +3,10 @@
     <v-card class="mb-4">
       <v-subheader>订阅配置</v-subheader>
       <v-form v-model="formState.basicValid" class="pl-4 pr-4 pb-0">
-        <v-text-field v-model="options.name" class="mt-2" clear-icon="clear" clearable
+        <v-text-field v-model="options.name" class="mt-2" clear-icon="clear" clearable label="订阅名称"
-          label="订阅名称" placeholder="填入订阅名称，名称需唯一" required />
+          placeholder="填入订阅名称，名称需唯一" required />
+        <v-text-field v-model="options['display-name']" class="mt-2" clear-icon="clear" clearable label="订阅显示名称"
+          placeholder="填入订阅显示名称，名称无需唯一" />
         <!--For Subscription-->
         <v-radio-group v-if="!isCollection" v-model="options.source" class="mt-0 mb-0">
           <template v-slot:label>
@@ -20,8 +22,9 @@
             <v-col></v-col>
           </v-row>
         </v-radio-group>
-        <v-textarea v-if="!isCollection && options.source !== 'local'" v-model="options.url" :rules="validations.urlRules" auto-grow
+        <v-textarea v-if="!isCollection && options.source !== 'local'" v-model="options.url"
-          class="mt-0" clear-icon="clear" clearable label="订阅链接" placeholder="填入机场原始订阅链接" required rows="2" />
+          :rules="validations.urlRules" auto-grow class="mt-0" clear-icon="clear" clearable label="订阅链接"
+          placeholder="填入机场原始订阅链接" required rows="2" />
         <v-textarea v-if="options.source === 'local'" v-model="options.content" clear-icon="clear" clearable
           label="订阅内容" placeholder="填入原始订阅内容" autogrow rows="5" row-height="15" class="mt-0">
         </v-textarea>
@@ -319,6 +322,7 @@ export default {
       },
       options: {
         name: "",
+        "display-name": "",
         source: "",
         url: "",
         content: "",
@@ -376,6 +380,7 @@ export default {
     config() {
       const output = {
         name: this.options.name,
+        'display-name': this.options['display-name'],
         icon: this.options.icon,
         process: []
       };
@@ -561,6 +566,7 @@ function loadProcess(options, source, isCollection = false) {
   options = {
     ...options,
     name: source.name,
+    'display-name': source['display-name'],
     icon: source.icon,
     ua: source.ua
   };

web/src/views/Subscription.vue

@@ -11,38 +11,28 @@
       </v-card-title>
       <v-card-text>
         <v-list dense>
-          <v-list-item
+          <v-list-item v-for="sub in subscriptions" :key="sub.name" @click="preview(sub)">
-              v-for="sub in subscriptions"
-              :key="sub.name"
-              @click="preview(sub)"
-          >
             <v-list-item-avatar>
               <v-icon v-if="!sub.icon" color="teal darken-1">mdi-cloud</v-icon>
               <v-img v-else :class="getIconClass(sub.icon)" :src="sub.icon" />
             </v-list-item-avatar>
 
             <v-list-item-content>
-              <v-list-item-title class="font-weight-medium" v-text="sub.name"></v-list-item-title>
+              <v-list-item-title class="font-weight-medium" v-text="sub['display-name'] || sub.name">
+              </v-list-item-title>
               <v-list-item-title v-text="sub.url"></v-list-item-title>
             </v-list-item-content>
             <v-list-item-action>
               <v-menu bottom left>
                 <template v-slot:activator="{ on, attrs }">
-                  <v-btn
+                  <v-btn v-bind="attrs" v-on="on" icon>
-                      v-bind="attrs"
-                      v-on="on"
-                      icon
-                  >
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
 
                 <v-list>
-                  <v-list-item
+                  <v-list-item v-for="(menuItem, i) in editMenu" :key="i"
-                      v-for="(menuItem, i) in editMenu"
+                    @click="subscriptionMenu(menuItem.action, sub)">
-                      :key="i"
-                      @click="subscriptionMenu(menuItem.action, sub)"
-                  >
                     <v-list-item-content>{{ menuItem.title }}</v-list-item-content>
                   </v-list-item>
                 </v-list>
@@ -64,28 +54,17 @@
       </v-card-title>
       <v-card-text>
         <v-list dense>
-          <v-list-item
+          <v-list-item v-for="collection in collections" :key="collection.name" dense
-              v-for="collection in collections"
+            @click="preview(collection, type='collection')">
-              :key="collection.name"
-              dense
-              @click="preview(collection, type='collection')"
-          >
             <v-list-item-avatar>
               <v-icon v-if="!collection.icon" color="teal darken-1">mdi-cloud</v-icon>
               <v-img v-else :class="getIconClass(collection.icon)" :src="collection.icon" />
             </v-list-item-avatar>
             <v-list-item-content>
-              <v-list-item-title class="font-weight-medium" v-text="collection.name"></v-list-item-title>
+              <v-list-item-title class="font-weight-medium" v-text="collection['display-name'] || collection.name">
-              <v-chip-group
+              </v-list-item-title>
-                  column
+              <v-chip-group column>
-              >
+                <v-chip v-for="subs in collection.subscriptions" :key="subs" class="ma-2 ml-0 mr-1 pa-2" label small>
-                <v-chip
-                    v-for="subs in collection.subscriptions"
-                    :key="subs"
-                    class="ma-2 ml-0 mr-1 pa-2"
-                    label
-                    small
-                >
                   {{ subs }}
                 </v-chip>
               </v-chip-group>
@@ -93,21 +72,14 @@
             <v-list-item-action>
               <v-menu bottom left>
                 <template v-slot:activator="{ on, attrs }">
-                  <v-btn
+                  <v-btn v-bind="attrs" v-on="on" icon>
-                      v-bind="attrs"
-                      v-on="on"
-                      icon
-                  >
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
 
                 <v-list>
-                  <v-list-item
+                  <v-list-item v-for="(menuItem, i) in editMenu" :key="i"
-                      v-for="(menuItem, i) in editMenu"
+                    @click="collectionMenu(menuItem.action, collection)">
-                      :key="i"
-                      @click="collectionMenu(menuItem.action, collection)"
-                  >
                     <v-list-item-content>{{ menuItem.title }}</v-list-item-content>
                   </v-list-item>
                 </v-list>
@@ -119,9 +91,7 @@
     </v-card>
     <v-dialog v-model="showProxyList" fullscreen hide-overlay scrollable transition="dialog-bottom-transition">
       <v-card fluid>
-        <v-toolbar
+        <v-toolbar class="flex-grow-0">
-            class="flex-grow-0"
-        >
           <v-icon>mdi-dns</v-icon>
           <v-spacer></v-spacer>
           <v-toolbar-title>
@@ -134,29 +104,19 @@
             </v-btn>
           </v-toolbar-items>
           <template v-slot:extension>
-            <v-tabs
+            <v-tabs v-model="tab" centered grow>
-                v-model="tab"
-                centered
-                grow
-            >
               <v-tabs-slider color="primary" />
-              <v-tab
+              <v-tab key="raw">
-                  key="raw"
-              >
                 <h4>原始节点</h4>
               </v-tab>
-              <v-tab
+              <v-tab key="processed">
-                  key="processed"
-              >
                 <h4>生成节点</h4>
               </v-tab>
             </v-tabs>
           </template>
         </v-toolbar>
         <v-card-text>
-          <v-tabs-items
+          <v-tabs-items v-model="tab">
-              v-model="tab"
-          >
             <v-tab-item key="raw">
               <proxy-list :key="url + 'raw'" ref="proxyList" :raw="true" :sub="sub" :url="url"></proxy-list>
             </v-tab-item>