实现了一遍

package.json

@@ -11,23 +11,25 @@
     "test": "echo \"No test specified\" && exit 0"
   },
   "dependencies": {
-    "axios": "^1.2.1",
-    "vuex": "^4.0.1",
     "@quasar/extras": "^1.0.0",
+    "@waiting/base64": "^4.2.9",
+    "axios": "^1.2.1",
+    "js-base64": "^3.7.5",
     "quasar": "^2.6.0",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
+    "@quasar/app-vite": "^1.0.0",
+    "@types/node": "^12.20.21",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "eslint": "^8.10.0",
-    "eslint-plugin-vue": "^9.0.0",
-    "eslint-config-prettier": "^8.1.0",
-    "prettier": "^2.5.1",
-    "@types/node": "^12.20.21",
-    "@quasar/app-vite": "^1.0.0",
     "autoprefixer": "^10.4.2",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "prettier": "^2.5.1",
     "typescript": "^4.5.4"
   },
   "engines": {
@@ -35,4 +37,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
+}

quasar.config.js

@@ -85,7 +85,11 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        notify: {
+          /* look at QuasarConfOptions from the API card */
+        },
+      },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
@@ -98,7 +102,7 @@ module.exports = configure(function (/* ctx */) {
       // directives: [],
 
       // Quasar plugins
-      plugins: [],
+      plugins: ['Notify'],
     },
 
     // animations: 'all', // --- includes all animations

src/api/api.ts

@@ -0,0 +1,7 @@
+import { api } from 'src/boot/axios';
+class getdata {
+  async get_server() {
+    return await api.get('https://api.shagain.club/api.php?type=list');
+  }
+}
+export { getdata };

src/components/LinkItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="row">
+    <div class="col-12">
+      <h6 style="text-align: center;margin: 1rem;">{{ props.serve.tips }}</h6>
+      <q-input v-model="outtext" filled autogrow />
+      <div style="text-align: center;margin-top: 1rem;">
+        <q-btn color="white" text-color="black" @click="copy" label="复制" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  ref,
+} from 'vue';
+import { copyToClipboard } from 'quasar'
+import { encode, decode } from 'js-base64';
+import { useQuasar } from 'quasar'
+export default defineComponent({
+  name: 'LinkItem',
+  props: {
+    serve: {
+      type: Object,
+      required: true
+    },
+    text: {
+      type: String
+    }
+  },
+  setup(props) {
+    const $q = useQuasar()
+    const outtext = computed(() => {
+      let obj = JSON.parse(decode(props.text!.replace('vmess://', '')));
+      obj.add = props.serve.ip
+      obj.port = props.serve.port
+      obj.host = props.serve.host
+      obj.tls = props.serve.istls == 0 ? '' : 'tls'
+      let reg = new RegExp(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/);
+      obj.path = '/' + obj.ps.match(reg)[0];
+      return 'vmess://' + encode(JSON.stringify(obj))
+    })
+    const copy = () => {
+      copyToClipboard(outtext.value)
+        .then(() => {
+          // success!
+          $q.notify({
+            message: '复制成功',
+            color: 'purple',
+            position: 'top'
+          })
+        })
+        .catch(() => {
+          // fail
+          $q.notify({
+            message: '复制失败',
+            color: 'purple'
+          })
+        })
+    }
+    return { props, outtext, copy };
+  },
+});
+</script>

src/components/models.ts

@@ -6,3 +6,11 @@ export interface Todo {
 export interface Meta {
   totalCount: number;
 }
+export interface server {
+  host: string;
+  id: number;
+  ip: string;
+  istls: number;
+  port: number;
+  tips: string;
+}

src/layouts/MainLayout.vue

@@ -1,10 +1,8 @@
 <template>
   <q-layout view="hHh lpR fFf">
-
     <q-page-container>
       <router-view />
     </q-page-container>
-
   </q-layout>
 </template>
 

src/pages/IndexPage.vue

@@ -1,44 +1,61 @@
 <template>
-  <q-page class="row items-center justify-evenly">
-    <example-component title="Example component" active :todos="todos" :meta="meta"></example-component>
-  </q-page>
+  <div>
+    <div class="row">
+      <div class="col-4"></div>
+      <div class="col-4">
+        <h6 style="text-align: center;margin: 1rem;">节点</h6>
+        <q-input v-model="text" filled autogrow />
+      </div>
+    </div>
+    <div v-if="isobj">
+      <div class="row" v-for="(item, index) in serve" :key="index">
+        <div class="col-4"></div>
+        <div class="col-4">
+          <LinkItem :serve="item" v-model:text="text"></LinkItem>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
 </template>
 
 <script lang="ts">
-import { Todo, Meta } from 'components/models';
-import ExampleComponent from 'components/ExampleComponent.vue';
-import { defineComponent, ref } from 'vue';
-
+import { server } from 'components/models';
+import { computed, defineComponent, onMounted, ref } from 'vue';
+import { getdata } from 'src/api/api'
+import LinkItem from 'components/LinkItem.vue';
+import { b64decode } from '@waiting/base64'
+import { encode, decode } from 'js-base64';
 export default defineComponent({
   name: 'IndexPage',
-  components: { ExampleComponent },
+  components: { LinkItem },
   setup() {
-    const todos = ref<Todo[]>([
-      {
-        id: 1,
-        content: 'ct1'
-      },
-      {
-        id: 2,
-        content: 'ct2'
-      },
-      {
-        id: 3,
-        content: 'ct3'
-      },
-      {
-        id: 4,
-        content: 'ct4'
-      },
-      {
-        id: 5,
-        content: 'ct5'
+    const serve = ref(<server[]>[])
+    const api = new getdata;
+    const text = ref('');
+    onMounted(() => {
+      api.get_server().then((res) => {
+        for (let index = 0; index < res.data.length; index++) {
+          serve.value.push(res.data[index]);
+        }
+      })
+    })
+    const isobj = computed(() => {
+      try {
+        let obj = JSON.parse(decode(text.value.replace('vmess://', '')));
+        console.log(obj)
+      } catch (error) {
+        console.log(error);
+        return false
       }
-    ]);
-    const meta = ref<Meta>({
-      totalCount: 1200
-    });
-    return { todos, meta };
+      return true
+    })
+    return {
+      serve,
+      text,
+      isobj
+    };
   }
 });
 </script>

yarn.lock

@@ -451,6 +451,11 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+"@waiting/base64@^4.2.9":
+  version "4.2.9"
+  resolved "https://registry.npmmirror.com/@waiting/base64/-/base64-4.2.9.tgz#fa7e98d1a317355fed0cfb0ebdf94c361b9a3acf"
+  integrity sha512-yzt9ih63oePux/sQM8Df6DTv1IeXGByaHrFiJoPszk0LaJwIGJ3IKhKhT/O6YMo2RignlP2cfxoo1lGmKZPIgQ==
+
 accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.npmmirror.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
@@ -1936,6 +1941,11 @@ jake@^10.8.5:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+js-base64@^3.7.5:
+  version "3.7.5"
+  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
+
 js-sdsl@^4.1.4:
   version "4.3.0"
   resolved "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"