完善分享功能

src/components/CommandCard.vue

@@ -56,19 +56,12 @@
                   </q-item-section>
                   <q-item-section>复制到剪贴板</q-item-section>
                 </q-item>
-                <q-item clickable disable>
+                <q-item clickable @click="showShare = true" v-close-popup>
                   <q-item-section side>
                     <q-icon name="share" />
                   </q-item-section>
                   <q-item-section>分享</q-item-section>
-                  <q-tooltip>暂未开放</q-tooltip>
+                  <q-tooltip>分享到分享中心</q-tooltip>
-                </q-item>
-                <q-item clickable disable>
-                  <q-item-section side>
-                    <q-icon name="supervisor_account" />
-                  </q-item-section>
-                  <q-item-section>分享设置</q-item-section>
-                  <q-tooltip>暂未开放</q-tooltip>
                 </q-item>
                 <q-item
                   clickable
@@ -236,6 +229,9 @@
         @delCrontab="delCrontab"
       />
     </q-dialog>
+    <q-dialog v-model="showShare">
+      <ShareDialog :command="getRawCommand(commandInfo)" />
+    </q-dialog>
   </div>
 </template>
 
@@ -243,9 +239,10 @@
 import commandTypes from "../js/options/commandTypes.js";
 import platformTypes from "../js/options/platformTypes.js";
 import CrontabSetting from "components/popup/CrontabSetting";
+import ShareDialog from "components/popup/ShareDialog";
 
 export default {
-  components: { CrontabSetting },
+  components: { CrontabSetting, ShareDialog },
   data() {
     return {
       allProgrammings: this.$root.programs,
@@ -253,6 +250,7 @@ export default {
       commandTypes: commandTypes,
       platformTypes: platformTypes,
       showCrontab: false,
+      showShare: false,
       cronJob: null,
     };
   },

src/components/popup/ShareDialog.vue

@@ -0,0 +1,170 @@
+<template>
+  <q-card style="width: 450px">
+    <q-card-section class="text-h5 text-center">分享</q-card-section>
+    <q-card-section>
+      <div class="full-width">
+        <q-input
+          outlined
+          v-model="yuQueInfo.yuQueToken"
+          type="text"
+          label="语雀 token"
+        >
+          <template v-slot:append>
+            <q-btn flat dense icon="save" @click="queryUser" />
+          </template>
+        </q-input>
+      </div>
+      <div class="full-width text-center q-pa-xs q-gutter-xs">
+        <q-radio
+          v-for="count in 5"
+          :key="count"
+          v-model="yuQueInfo.repo"
+          :val="count"
+          :label="`库 ${count}`"
+        />
+        <q-btn flat color="primary" icon="person_add" @click="joinRepo"
+          ><q-tooltip> 申请加入当前选中的库 </q-tooltip></q-btn
+        >
+      </div>
+    </q-card-section>
+    <q-card-actions align="center">
+      <q-btn
+        flat
+        color="grey"
+        icon="arrow_back_ios_new"
+        label="返回"
+        v-close-popup
+      />
+      <q-btn flat color="positive" icon="help" label="帮助" @click="showHelp" />
+      <q-btn
+        flat
+        color="primary"
+        icon="share"
+        :disable="disableShare"
+        @click="shareCommand"
+        label="分享"
+      />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+const joinLink = [
+  "https://www.yuque.com/g/fofolee/qcshares1/collaborator/join?token=6LZn2vc34dqfIQdC#",
+  "https://www.yuque.com/g/fofolee/qcshares2/collaborator/join?token=nmzw84L5Uj2Ltp0w#",
+  "https://www.yuque.com/g/fofolee/qcshares3/collaborator/join?token=7xRDGvUaOwAXTLLk#",
+  "https://www.yuque.com/g/fofolee/qcshares4/collaborator/join?token=DXb4XAVatwn2OoGK#",
+  "https://www.yuque.com/g/fofolee/qcshares5/collaborator/join?token=tw1kyfD2T4jjsQHc#",
+];
+
+export default {
+  data() {
+    return {
+      yuQueInfo: {
+        yuQueToken: "",
+        authorId: "",
+        authorName: "",
+        repo: 1,
+      },
+      maxCommandSize: 5 * 1024 * 1024,
+      shareLock: false,
+      releaseRepo: "fofolee/qcreleases",
+      shareRepo: "fofolee/qcshares",
+    };
+  },
+  props: {
+    command: Object,
+  },
+  computed: {
+    disableShare() {
+      return this.shareLock || !this.yuQueInfo.yuQueToken;
+    },
+  },
+  mounted() {
+    Object.assign(this.yuQueInfo, this.loadYuQueInfo());
+  },
+  methods: {
+    async shareCommand() {
+      this.shareLock = true;
+      let commandStr = JSON.stringify(this.command, null, 4);
+      if (commandStr.length > this.maxCommandSize)
+        return quickcommand.showMessageBox(
+          "命令大小超过5M无法分享，请检查图标或脚本内容是否过大",
+          "error"
+        );
+      let parameters = {
+        title: this.command.features.explain,
+        slug: this.command.features.code,
+        public: 1,
+        format: "markdown",
+        body: "```json\n" + commandStr + "\n```",
+      };
+      try {
+        await this.shareToYuQue(parameters);
+      } catch (e) {
+        return quickcommand.showMessageBox(
+          "还未加入该库，请选择正确的库，如有疑问，请查看帮助",
+          "error"
+        );
+      } finally {
+        setTimeout(() => {
+          this.shareLock = false;
+        }, 1000);
+      }
+    },
+    async shareToYuQue(parameters) {
+      window.yuQueClient.defaults.headers["X-Auth-Token"] =
+        this.yuQueInfo.yuQueToken;
+      let repo =
+        this.yuQueInfo.authorId === 1496740
+          ? this.releaseRepo
+          : this.shareRepo + this.yuQueInfo.repo;
+      let res = await window.yuQueClient.post(`repos/${repo}/docs`, parameters);
+      if (!res.data.data)
+        return quickcommand.showMessageBox("分享失败，不知道为啥", "error");
+      let docId = res.data.data.id;
+      res = await window.yuQueClient.put(
+        `repos/${repo}/docs/${docId}`,
+        parameters
+      );
+      if (!res.data.data)
+        return quickcommand.showMessageBox("分享失败，不知道为啥", "error");
+      this.saveYuQueInfo();
+      quickcommand.showMessageBox("分享成功！");
+    },
+    async queryUser() {
+      if (!this.yuQueInfo.yuQueToken) return;
+      window.yuQueClient.defaults.headers["X-Auth-Token"] =
+        this.yuQueInfo.yuQueToken;
+      try {
+        let res = await window.yuQueClient("user");
+        this.yuQueInfo.authorId = res.data.data.account_id;
+        this.yuQueInfo.authorName = res.data.data.name;
+        this.saveYuQueInfo();
+        quickcommand.showMessageBox("设置成功~");
+      } catch (e) {
+        quickcommand.showMessageBox("Token 校验失败", "error");
+      }
+    },
+    showHelp() {},
+    joinRepo() {
+      quickcommand
+        .showConfirmBox(
+          `将申请加入「库 ${this.yuQueInfo.repo}」，请勿重复申请，一般来说你只需要加入 5 个库的其中之一即可，如果当前库已满，则可尝试申请其他的库`
+        )
+        .then(() => {
+          utools.shellOpenExternal(joinLink[this.yuQueInfo.repo - 1]);
+        });
+    },
+    loadYuQueInfo() {
+      return this.$root.utools.getDB(this.$root.utools.DBPRE.CFG + "extraInfo");
+    },
+    saveYuQueInfo() {
+      this.$root.utools.putDB(
+        _.cloneDeep(this.yuQueInfo),
+        this.$root.utools.DBPRE.CFG + "extraInfo"
+      );
+    },
+  },
+};
+</script>

src/pages/ShareCenterPage.vue

@@ -130,7 +130,6 @@ export default {
       perPage: 8,
       commandSearchKeyword: "",
       releaseRepo: "fofolee/qcreleases",
-      shareRepo: "fofolee/qcshares",
       commandTypes: commandTypes,
       platform: window.processPlatform,
     };