feat: update

KeJunMao · Mar 14, 2023 · a69c8c6 · a69c8c6
1 parent 397a0a4
commit a69c8c6
Show file tree

Hide file tree

Showing 27 changed files with 295 additions and 258 deletions.
diff --git a/components/app/AppAccount.vue b/components/app/AppAccount.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const { signIn, status, data } = useSession();
+</script>
+
+<template>
+  <div>
+    <el-button v-if="status === 'unauthenticated'" text @click="() => signIn()">
+      <el-icon class="i-carbon:user"></el-icon>
+    </el-button>
+    <el-avatar
+      v-else-if="status === 'authenticated'"
+      :size="32"
+      :src="data?.user?.image ?? ''"
+    >
+      {{ data?.user?.name }}
+    </el-avatar>
+  </div>
+</template>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -5,13 +5,14 @@
     <div flex items-center col-span-4>
       <AppHeaderLogo></AppHeaderLogo>
     </div>
-    <div flex flex-1 items-center col-span-4 justify-center>
+    <div flex flex-1 items-center col-span-3 justify-center>
       <AppHeaderNavigation />
     </div>
-    <div flex gap-1 sm:gap-2 items-center col-span-4 justify-end>
+    <div flex gap-1 sm:gap-2 items-center col-span-5 justify-end>
       <AppSettings />
       <AppThemeSelect />
       <AppSocialIcons />
+      <AppAccount />
     </div>
   </el-header>
 </template>
diff --git a/components/create/CreateForms.vue b/components/create/CreateForms.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 const { step, maxStep, nextStep, prevStep, tool, isCreate } = useCreateTool();
-const { save, remove } = useCustomTools();
+const { create, remove, update } = useLocalTools();
 const localePath = useLocalePath();
-const handleSave = async () => {
-  await save(tool.value);
+const handleSave = () => {
   navigateTo({
     path: localePath(`/ai-${tool.value.id}`),
     replace: true,
   });
   if (isCreate.value) {
+    create(tool.value);
     ElMessage.success("Create Success");
   } else {
+    update(tool.value);
     ElMessage.success("Update Success");
   }
 };
-const handleRemove = async () => {
-  await remove(tool.value.id!);
+const handleRemove = () => {
+  remove(tool.value.id!);
   navigateTo({
     path: localePath("/"),
     replace: true,

diff --git a/components/create/CreatePreviews.vue b/components/create/CreatePreviews.vue
@@ -10,11 +10,13 @@ const { tool, step } = useCreateTool();
         <Card max-w-2xl flex-1 v-else-if="step === 1">
           <ToolForms readonly :tool="tool" />
         </Card>
-        <Card max-w-2xl flex-1 v-else-if="step === 2">
+        <template v-else-if="step === 2">
           <ToolHeader :tool="tool" />
-          <ToolForms :tool="tool" />
-          <ToolRequestPreview :tool="tool" />
-        </Card>
+          <Card>
+            <ToolForms :tool="tool" />
+            <ToolRequestPreview :tool="tool" />
+          </Card>
+        </template>
       </CreatePreviewTransition>
     </div>
   </div>

diff --git a/components/tool/ToolActions.vue b/components/tool/ToolActions.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { ToolItem } from "~~/types";
+
+const localePath = useLocalePath();
+
+defineProps<{
+  tool: ToolItem;
+}>();
+</script>
+
+<template>
+  <div absolute left-0 top--8 w-full h-full flex justify-end gap-1>
+    <NuxtLink
+      :to="{
+        path: localePath('/create'),
+        query: {
+          id: tool.id,
+        },
+      }"
+    >
+      <el-button size="small" text>
+        <el-icon class="i-carbon:edit"></el-icon>
+      </el-button>
+    </NuxtLink>
+    <ToolSettingDialog :tool="tool" />
+  </div>
+</template>
diff --git a/components/tool/ToolDetail.vue b/components/tool/ToolDetail.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
+import { ToolItem } from "~~/types";
+
 const props = defineProps<{
   tool: ToolItem;
 }>();
@@ -16,8 +17,11 @@ function submit(data: any) {
 </script>
 <template>
   <div>
-    <ToolHeader show-action :tool="tool" />
-    <ToolForms :loading="loading" @submit="submit" :tool="tool" />
-    <ToolResult v-if="result" :html="resultHtml" />
+    <ToolHeader :tool="tool" />
+    <Card relative>
+      <ToolActions :tool="tool" />
+      <ToolForms :loading="loading" @submit="submit" :tool="tool" />
+      <ToolResult v-if="result" :html="resultHtml" />
+    </Card>
   </div>
 </template>
diff --git a/components/tool/ToolHeader.vue b/components/tool/ToolHeader.vue
@@ -1,71 +1,20 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
-import { v4 as uuidv4 } from "uuid";
-const localePath = useLocalePath();
+import { ToolItem } from "~~/types";
 
-const props = defineProps<{
+defineProps<{
   tool: ToolItem;
-  showAction?: boolean;
 }>();
-const { isLocalTool } = useTools();
-const { save } = useCustomTools();
-function handleFork() {
-  const id = uuidv4();
-  save({
-    ...props.tool,
-    id,
-  });
-  navigateTo({
-    path: localePath(`/ai-${id}`),
-    replace: true,
-  });
-}
 </script>
 <template>
-  <div flex gap-2 mb-4>
-    <div
-      v-if="tool?.icon"
-      w-12
-      h-12
-      flex
-      items-center
-      justify-center
-      rounded-md
-      color-primary
-      transition-all
-      border
-      dark:border-gray-800
-    >
+  <div flex flex-col items-center text-center mb-8>
+    <div v-if="tool?.icon" text-6xl color-primary my-2 sm:my-6>
       <ToolIcon :icon="tool.icon" />
     </div>
-    <div flex flex-col gap-y-1 flex-1>
-      <div font-bold>{{ tool?.name }}</div>
-      <div line-clamp-2 text-sm text-gray-500>
-        {{ tool?.desc ?? "Nothing in here" }}
-      </div>
+    <div text-2xl font-semibold text-gray-900 dark:text-gray-100>
+      {{ tool?.name }}
     </div>
-    <div flex gap-1>
-      <template v-if="showAction && isLocalTool(tool.id!)">
-        <ToolRemoteAction :tool="tool" />
-        <NuxtLink
-          :to="{
-            path: localePath('/create'),
-            query: {
-              id: tool.id,
-            },
-          }"
-        >
-          <el-button size="small" text>
-            <el-icon class="i-carbon:edit"></el-icon>
-          </el-button>
-        </NuxtLink>
-        <ToolSettingDialog :tool="tool" />
-      </template>
-      <template v-else>
-        <el-button @click="handleFork" size="small" text>
-          <el-icon class="i-carbon:fork"></el-icon>
-        </el-button>
-      </template>
+    <div v-if="tool?.desc" mt-1 font-medium text-gray-500 dark:text-gray-400>
+      {{ tool?.desc }}
     </div>
   </div>
 </template>
diff --git a/components/tool/ToolPageLayout.vue b/components/tool/ToolPageLayout.vue
@@ -1,20 +1,7 @@
 <template>
   <main flex-1>
-    <div max-w-2xl mx-auto mt-10>
-      <div
-        rounded-xl
-        bg-white
-        dark:bg-dark-900
-        transition-all
-        drop-shadow-none
-        sm:drop-shadow-lg
-        border-light
-        of-hidden
-        px-16px
-        py-20px
-      >
-        <slot></slot>
-      </div>
+    <div max-w-2xl mx-auto px-4 mt-6 sm:mt-10>
+      <slot></slot>
     </div>
   </main>
 </template>
diff --git a/components/tool/ToolRemoteAction.vue b/components/tool/ToolRemoteAction.vue
@@ -1,5 +1,4 @@
-<script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
+<!-- <script lang="ts" setup>
 const { status, signIn } = useSession();
 const loading = ref(false);
 const { save, remove } = useCustomTools();
@@ -73,4 +72,7 @@ async function handleRemove() {
       <el-icon class="i-carbon:upload"></el-icon>
     </el-button>
   </div>
-</template>
+</template> -->
+
+
+<template></template>
diff --git a/components/tool/ToolSettingDialog.vue b/components/tool/ToolSettingDialog.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { ToolItem } from "~/composables/useTools";
 import { defaultChatGPTOptions } from "~/composables/useChatGPT";
 import { objectPick } from "@vueuse/core";
+import { ToolItem } from "~~/types";
 
 const props = defineProps<{
   tool: ToolItem;
 }>();
 const show = ref(false);
-const { save } = useCustomTools();
+const { create } = useLocalTools();
 
 const formData = ref<Record<string, any>>({
   ...objectPick(defaultChatGPTOptions, [
@@ -22,7 +22,7 @@ const formData = ref<Record<string, any>>({
 });
 
 async function handleSave() {
-  await save({
+  await create({
     ...props.tool,
     options: formData.value,
   });

diff --git a/composables/useChatGPT.ts b/composables/useChatGPT.ts
@@ -1,24 +1,5 @@
-import { MaybeRef } from "@vueuse/shared";
-
-export interface ChatGPTOptions {
-  apiKey: string;
-  apiBaseUrl: string;
-  model: "gpt-3.5-turbo" | "gpt-3.5-turbo-0301";
-  temperature?: number;
-  top_p?: number;
-  n?: number;
-  stream?: boolean;
-  max_tokens?: number;
-  presence_penalty?: number;
-  frequency_penalty?: number;
-}
-
-export interface ChatGPTMessage {
-  role: "system" | "user" | "assistant";
-  content: string;
-}
-
-export type ChatGPTMessages = ChatGPTMessage[];
+import { STORAGE_KEY_GPT_SETTINGS } from "~/constants";
+import { ChatGPTMessages, ChatGPTOptions } from "~~/types";
 
 export const defaultChatGPTOptions: ChatGPTOptions = {
   apiKey: "",
@@ -35,7 +16,7 @@ export const defaultChatGPTOptions: ChatGPTOptions = {
 
 export const useChatGPT = createSharedComposable(() => {
   const storageOptions = useLocalStorage(
-    "ai-anything:GPTSetting",
+    STORAGE_KEY_GPT_SETTINGS,
     defaultChatGPTOptions
   );
   const sendMessage = async (

diff --git a/composables/useCustomTools.ts b/composables/useCustomTools.ts
diff --git a/composables/useLocalTools.ts b/composables/useLocalTools.ts
@@ -0,0 +1,39 @@
+import { MaybeRef } from "@vueuse/shared";
+import { STORAGE_KEY_TOOLS } from "~~/constants";
+import { ToolItem } from "~~/types";
+
+export const useLocalTools = () => {
+  const tools = useLocalStorage<ToolItem[]>(STORAGE_KEY_TOOLS, []);
+  function create(tool: ToolItem) {
+    tools.value.push(tool);
+  }
+
+  function get(id: MaybeRef<string>) {
+    return tools.value.find((v) => v.id === unref(id));
+  }
+
+  function remove(id: MaybeRef<string>) {
+    tools.value = tools.value.filter((v) => v.id !== unref(id));
+  }
+
+  function update(tool: Partial<ToolItem>) {
+    const { id, ...other } = tool;
+    tools.value = tools.value.map((v) => {
+      if (v.id === id) {
+        return {
+          ...v,
+          ...other,
+        };
+      }
+      return v;
+    });
+  }
+
+  return {
+    tools,
+    create,
+    get,
+    remove,
+    update,
+  };
+};