feat: share

src/App.vue

@@ -1,69 +1,28 @@
 <script setup lang="ts">
-import { NConfigProvider, NModal, dateZhCN, zhCN } from 'naive-ui';
+import { NConfigProvider, dateZhCN, zhCN } from 'naive-ui';
 import { RouterView } from 'vue-router';
-import store from './utils/store';
+import ErrorDlg from './components/ErrorDlg.vue';
 </script>
-
 <template>
   <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" abstract>
-    <NModal
-      v-model:show="store.githubErrorDlgVisible"
-      preset="dialog"
-      title="生成分享链接失败"
-    >
-      <div>生成分享链接需要以下条件</div>
-      <div>
-        在当前浏览器登录
-        <a href="https://github.com" target="_blank" rel="noopener noreferrer">
-          github.com
-        </a>
-      </div>
-    </NModal>
-    <NModal
-      v-model:show="store.networkErrorDlgVisible"
-      preset="dialog"
-      title="访问其它域名资源失败"
-    >
-      <div>访问其它域名资源需要以下条件</div>
-      <div>
-        1. 安装脚本管理器, 如
-        <a
-          href="https://violentmonkey.github.io/"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Violentmonkey
-        </a>
-      </div>
-      <div>
-        2. 安装油猴脚本
-        <a
-          href="https://github.com/gkd-kit/network-extension"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          network-extension
-        </a>
-      </div>
-      <div>3. 在当前网站启用上述油猴脚本的API注入功能</div>
-      <div>
-        4. 如果是分享链接则需要在当前浏览器登录
-        <a href="https://github.com" target="_blank" rel="noopener noreferrer">
-          github.com
-        </a>
-      </div>
-    </NModal>
+    <ErrorDlg />
     <RouterView />
   </NConfigProvider>
 </template>
 <style lang="scss">
+:root {
+  --gkd-height: max(700px, 100vh);
+}
 #app {
   min-width: 1200px;
   min-height: 700px;
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+  &.mobile {
+    min-width: auto;
+  }
 }
 .gkd_code {
   font-family: v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace !important;

src/components/ActionCard.vue

@@ -92,7 +92,7 @@ const copy = async (content: string) => {
 };
 </script>
 <template>
-  <NSpace>
+  <div flex gap-12px flex-nowrap>
     <a v-if="showPreview" target="_blank" :href="previewUrl">
       <NButton size="small">
         <template #icon>
@@ -219,5 +219,5 @@ const copy = async (content: string) => {
         ></NIcon>
       </template>
     </NButton>
-  </NSpace>
+  </div>
 </template>

src/components/BuildShareDlg.vue

@@ -0,0 +1,102 @@
+<script setup lang="tsx">
+import { uploadPoliciesAssets } from '@/utils/github';
+import { copy } from '@/utils/others';
+import { useTask } from '@/utils/task';
+import { useDebounceFn } from '@vueuse/core';
+import JSON5 from 'json5';
+import { NButton, NInput, NModal } from 'naive-ui';
+import { shallowRef, watchEffect } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const show = defineModel('show', { default: false });
+
+const text = shallowRef('');
+
+const disabled = shallowRef(false);
+const checkJson = useDebounceFn(() => {
+  try {
+    JSON5.parse(text.value);
+    disabled.value = false;
+  } catch {
+    disabled.value = true;
+  }
+}, 500);
+watchEffect(() => {
+  if (text.value.trim()) {
+    checkJson();
+  } else {
+    disabled.value = true;
+  }
+});
+
+const linkDlgShow = shallowRef(false);
+const shareLink = shallowRef('');
+const copyLink = () => {
+  copy(shareLink.value);
+  linkDlgShow.value = false;
+};
+
+const buildShare = useTask(async () => {
+  const data = JSON5.parse(text.value);
+  const asset = await uploadPoliciesAssets(
+    new TextEncoder().encode(
+      JSON5.stringify({
+        data,
+        ctime: Date.now(),
+        type: 'share',
+      }),
+    ),
+    'file.txt',
+    'text/plain',
+  );
+  const link = location.origin + router.resolve(`/s/${asset.id}`).href;
+  shareLink.value = link;
+  linkDlgShow.value = true;
+});
+</script>
+<template>
+  <NModal
+    v-model:show="show"
+    preset="dialog"
+    title="分享规则"
+    :positiveText="buildShare.loading ? '分享中...' : '分享'"
+    @positiveClick="buildShare.invoke"
+    :loading="buildShare.loading"
+    :positiveButtonProps="{ disabled }"
+    style="width: 800px"
+    @afterLeave="text = ''"
+  >
+    <NInput
+      class="gkd_code h-[calc(var(--gkd-height)*0.6)]"
+      type="textarea"
+      show-count
+      :value="text"
+      @update:value="
+        if (!buildShare.loading) {
+          text = $event;
+        }
+      "
+      placeholder="请输入需要分享的规则"
+    />
+  </NModal>
+  <NModal
+    v-model:show="linkDlgShow"
+    preset="dialog"
+    title="分享成功"
+    positiveText="复制并关闭"
+    negativeText="重新分享"
+    @positiveClick="copyLink"
+    @negativeClick="
+      linkDlgShow = false;
+      text = '';
+      show = true;
+    "
+    @afterLeave="shareLink = ''"
+  >
+    <NButton text tag="a" :href="shareLink" target="_blank" type="primary">
+      {{ shareLink }}
+    </NButton>
+  </NModal>
+</template>

src/components/ErrorDlg.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import store from '@/utils/store';
+import { NModal } from 'naive-ui';
+</script>
+<template>
+  <NModal
+    v-model:show="store.githubErrorDlgVisible"
+    preset="dialog"
+    title="生成分享链接失败"
+  >
+    <div>生成分享链接需要以下条件</div>
+    <div>
+      在当前浏览器登录
+      <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+        github.com
+      </a>
+    </div>
+  </NModal>
+  <NModal
+    v-model:show="store.networkErrorDlgVisible"
+    preset="dialog"
+    title="访问其它域名资源失败"
+  >
+    <div>访问其它域名资源需要以下条件</div>
+    <div>
+      1. 安装脚本管理器, 如
+      <a
+        href="https://violentmonkey.github.io/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Violentmonkey
+      </a>
+    </div>
+    <div>
+      2. 安装油猴脚本
+      <a
+        href="https://github.com/gkd-kit/network-extension"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        network-extension
+      </a>
+    </div>
+    <div>3. 在当前网站启用上述油猴脚本的API注入功能</div>
+    <div>
+      4. 如果是分享链接则需要在当前浏览器登录
+      <a href="https://github.com" target="_blank" rel="noopener noreferrer">
+        github.com
+      </a>
+    </div>
+  </NModal>
+</template>

src/components/WindowCard.vue

@@ -139,9 +139,12 @@ const renderLabel = (info: {
               {{ snapshot.appVersionCode }}
             </NEllipsis>
           </NTd>
-          <NTd class="whitespace-nowrap" @click="copy(snapshot.appId)">
+          <NTd
+            class="whitespace-nowrap max-w-[max(12vw,180px)]"
+            @click="copy(snapshot.appId)"
+          >
             <NEllipsis>
-              {{ snapshot.appId }}
+              {{ snapshot.appId + snapshot.appId }}
             </NEllipsis>
           </NTd>
           <NTd
@@ -152,7 +155,7 @@ const renderLabel = (info: {
               {{ snapshot.activityId }}
             </NEllipsis>
           </NTd>
-          <NTd class="min-w-175px">
+          <NTd>
             <slot></slot>
           </NTd>
         </NTr>

src/main.ts

@@ -5,11 +5,12 @@ import App from './App.vue';
 import router from './router';
 import i18n from './i18n';
 import { commitLog } from './utils/commit';
+import root from './utils/root';
 
 const app = createApp(App);
 app.use(i18n);
 app.use(router);
-app.mount('#app');
+app.mount(root);
 
 if (import.meta.env.PROD) {
   console.log(commitLog);

src/router/index.ts

@@ -1,6 +1,21 @@
 import { toValidURL } from '@/utils/check';
+import type { RouteRecordRedirectOption } from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router';
 
+const redirectImport: RouteRecordRedirectOption = (to) => {
+  const github_asset_id = String(to.params.github_asset_id).match(/^\d+/)?.[0]; // 丢弃非法字符
+  if (!github_asset_id) {
+    return { path: '/404' };
+  }
+  const url = `https://github.com/gkd-kit/inspect/files/${github_asset_id}/file.zip`;
+  return {
+    path: '/i',
+    query: {
+      url,
+    },
+  };
+};
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -14,34 +29,30 @@ const router = createRouter({
       component: () => import('@/views/SnapshotPage.vue'),
     },
     {
-      path: '/import',
-      name: 'import',
+      path: '/i',
       component: () => import('@/views/ImportPage.vue'),
     },
     {
-      // https://github.com/gkd-kit/inspect/files/12448138/file.zip
-      path: `/import/:github_zip_asset_id`,
+      path: '/i/:github_asset_id',
+      redirect: redirectImport,
+    },
+    {
+      path: '/import',
       redirect(to) {
-        const github_zip_asset_id = String(to.params.github_zip_asset_id).match(
-          /^\d+/,
-        )?.[0]; // 丢弃非法字符
-        if (!github_zip_asset_id) {
-          return { path: '/404' };
-        }
-        const url = `https://github.com/gkd-kit/inspect/files/${github_zip_asset_id}/file.zip`;
         return {
-          name: `import`,
-          query: {
-            url,
-          },
+          path: '/i',
+          query: to.query,
         };
       },
     },
+    {
+      path: `/import/:github_asset_id`,
+      redirect: redirectImport,
+    },
     {
       path: '/device',
-      name: 'device',
       component: () => import('@/views/DevicePage.vue'),
-      beforeEnter(to, from, next) {
+      beforeEnter(to, _, next) {
         const u = toValidURL(String(to.query.url));
         if (u) {
           localStorage.setItem('device_link', u.origin);
@@ -52,6 +63,36 @@ const router = createRouter({
         next();
       },
     },
+    {
+      path: '/s',
+      component: () => import('@/views/PreviewSharePage.vue'),
+      beforeEnter(to, _, next) {
+        if (to.query.url) {
+          const u = toValidURL(String(to.query.url));
+          if (u) {
+            return next();
+          }
+        }
+        return next({ path: '/404' });
+      },
+    },
+    {
+      path: '/s/:github_asset_id',
+      component: () => import('@/views/PreviewSharePage.vue'),
+      beforeEnter(to, _, next) {
+        const github_asset_id = String(to.params.github_asset_id).match(
+          /^\d+/,
+        )?.[0];
+        if (!github_asset_id) {
+          return next({ path: '/404' });
+        }
+        if (to.params.github_asset_id === github_asset_id) {
+          return next();
+        } else {
+          return next('/s/' + github_asset_id);
+        }
+      },
+    },
     {
       path: '/404',
       component: () => import('@/views/_404Page.vue'),