From f93398b70122c40f06d6f16d40b6374642347a4f Mon Sep 17 00:00:00 2001
From: Hsiaoyi Hsu <xreamxu@gmail.com>
Date: Wed, 22 Jun 2022 23:08:15 +0800
Subject: [PATCH] feat: Added support for display name

---
 web/src/views/Cloud.vue        | 61 ++++++++----------------
 web/src/views/SubEditor.vue    | 14 ++++--
 web/src/views/Subscription.vue | 86 +++++++++-------------------------
 3 files changed, 53 insertions(+), 108 deletions(-)

diff --git a/web/src/views/Cloud.vue b/web/src/views/Cloud.vue
index 2279780..5c5ebbd 100644
--- a/web/src/views/Cloud.vue
+++ b/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-model="currentArtifact.name"
-                  :disabled="editing"
-                  clear-icon="clear"
-                  clearable
-                  label="配置名称"
-                  placeholder="填入生成配置名称，名称需唯一，如Clash.yaml。"
-              />
+              <v-text-field v-model="currentArtifact.name" :disabled="editing" clear-icon="clear" clearable label="配置名称"
+                placeholder="填入生成配置名称，名称需唯一，如Clash.yaml。" />
+              <v-text-field v-model="currentArtifact['display-name']" clear-icon="clear" clearable label="配置显示名称"
+                placeholder="填入生成配置显示名称，名称无需唯一。" />
               <v-menu offset-y>
                 <template v-slot:activator="{on}">
-                  <v-text-field
-                      v-on="on"
-                      :rules="validations.required"
-                      :value="getType(currentArtifact.type)"
-                      label="类型"
-                  />
+                  <v-text-field v-on="on" :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-model="currentArtifact.source"
-                      v-on="on"
-                      :placeholder="`填入${getType(currentArtifact.type) || '来源'}的名称。`"
-                      :rules="validations.required"
-                      label="来源"
-                  />
+                  <v-text-field v-model="currentArtifact.source" v-on="on"
+                    :placeholder="`填入${getType(currentArtifact.type) || '来源'}的名称。`" :rules="validations.required"
+                    label="来源" />
                 </template>
                 <v-list dense>
-                  <v-list-item
-                      v-for="(sub, idx) in getSources(currentArtifact.type)"
-                      :key="idx"
-                      @click="currentArtifact.source = sub.name"
-                  >
+                  <v-list-item v-for="(sub, idx) in getSources(currentArtifact.type)" :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-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-on="on"
-                      :rules="validations.required"
-                      :value="currentArtifact.platform"
-                      label="目标"
-                  />
+                  <v-text-field v-on="on" :rules="validations.required" :value="currentArtifact.platform" label="目标" />
                 </template>
                 <v-list dense>
-                  <v-list-item
-                      v-for="platform in ['Surge', 'Loon', 'QX', 'Clash']"
-                      :key="platform"
-                      @click="currentArtifact.platform = platform"
-                  >
+                  <v-list-item v-for="platform in ['Surge', 'Loon', 'QX', 'Clash']" :key="platform"
+                    @click="currentArtifact.platform = platform">
                     <v-list-item-avatar>
                       <v-img :class="getIconClass('#invert')" :src="getIcon(platform)"></v-img>
                     </v-list-item-avatar>
@@ -121,11 +98,11 @@
       <template v-for="(artifact, idx) in artifacts">
         <v-list-item :key="artifact.name" dense three-line>
           <v-list-item-avatar>
-            <v-img :class="getIconClass('#invert')" :src="getIcon(artifact.platform)"/>
+            <v-img :class="getIconClass('#invert')" :src="getIcon(artifact.platform)" />
           </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: ""
diff --git a/web/src/views/SubEditor.vue b/web/src/views/SubEditor.vue
index 765c0e7..237c242 100644
--- a/web/src/views/SubEditor.vue
+++ b/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
-          label="订阅名称" placeholder="填入订阅名称，名称需唯一" required />
+        <v-text-field v-model="options.name" class="mt-2" clear-icon="clear" clearable label="订阅名称"
+          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
-          class="mt-0" clear-icon="clear" clearable label="订阅链接" placeholder="填入机场原始订阅链接" required rows="2" />
+        <v-textarea v-if="!isCollection && options.source !== 'local'" v-model="options.url"
+          :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
   };
diff --git a/web/src/views/Subscription.vue b/web/src/views/Subscription.vue
index af36e70..809545c 100644
--- a/web/src/views/Subscription.vue
+++ b/web/src/views/Subscription.vue
@@ -11,38 +11,28 @@
       </v-card-title>
       <v-card-text>
         <v-list dense>
-          <v-list-item
-              v-for="sub in subscriptions"
-              :key="sub.name"
-              @click="preview(sub)"
-          >
+          <v-list-item 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-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-bind="attrs"
-                      v-on="on"
-                      icon
-                  >
+                  <v-btn v-bind="attrs" v-on="on" icon>
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
 
                 <v-list>
-                  <v-list-item
-                      v-for="(menuItem, i) in editMenu"
-                      :key="i"
-                      @click="subscriptionMenu(menuItem.action, sub)"
-                  >
+                  <v-list-item v-for="(menuItem, i) in editMenu" :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-for="collection in collections"
-              :key="collection.name"
-              dense
-              @click="preview(collection, type='collection')"
-          >
+          <v-list-item v-for="collection in collections" :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-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-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-list-item-title class="font-weight-medium" v-text="collection['display-name'] || collection.name">
+              </v-list-item-title>
+              <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>
                   {{ 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-bind="attrs"
-                      v-on="on"
-                      icon
-                  >
+                  <v-btn v-bind="attrs" v-on="on" icon>
                     <v-icon>mdi-dots-vertical</v-icon>
                   </v-btn>
                 </template>
 
                 <v-list>
-                  <v-list-item
-                      v-for="(menuItem, i) in editMenu"
-                      :key="i"
-                      @click="collectionMenu(menuItem.action, collection)"
-                  >
+                  <v-list-item v-for="(menuItem, i) in editMenu" :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
-            class="flex-grow-0"
-        >
+        <v-toolbar 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-model="tab"
-                centered
-                grow
-            >
-              <v-tabs-slider color="primary"/>
-              <v-tab
-                  key="raw"
-              >
+            <v-tabs v-model="tab" centered grow>
+              <v-tabs-slider color="primary" />
+              <v-tab key="raw">
                 <h4>原始节点</h4>
               </v-tab>
-              <v-tab
-                  key="processed"
-              >
+              <v-tab key="processed">
                 <h4>生成节点</h4>
               </v-tab>
             </v-tabs>
           </template>
         </v-toolbar>
         <v-card-text>
-          <v-tabs-items
-              v-model="tab"
-          >
+          <v-tabs-items 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>