feat(editor)!: complete edit, add, actions and more basic features

.env.development

@@ -2,4 +2,4 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://192.168.9.186:3000'
+VITE_API_URL = 'http://192.168.1.19:3000'

.env.production

@@ -2,4 +2,4 @@
 ENV = 'production'
 
 # 线上环境接口地址
-VITE_API_URL = 'http://localhost:3000'
+VITE_API_URL = 'http://192.168.1.19:3000'

package.json

@@ -20,7 +20,8 @@
     "vue": "^3.2.25",
     "vue-clipboard3": "^2.0.0",
     "vue-i18n": "^9.2.0-beta.36",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.0.16",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",

src/App.vue

@@ -8,11 +8,12 @@
 <script setup lang="ts">
   import NavBar from '@/components/NavBar.vue'
   import { setColorThemeClass } from '@/utils/setColorThemeClass'
-  import { onMounted, provide } from 'vue'
+  import { provide, onMounted } from 'vue'
   import { Notify } from '@nutui/nutui'
   import { useSubsStore } from '@/store/subs'
   import { useGlobalStore } from '@/store/global'
   import { useI18n } from 'vue-i18n'
+
   const { t } = useI18n()
 
   const subsStore = useSubsStore()
@@ -71,6 +72,9 @@
         const msg = e?.error?.message ?? ''
         notify.msg += msg ? code + ', ' + msg : code
       }
+
+      subsStore.subs = {}
+      subsStore.collections = {}
     }
     globalStore.setLoading(false)
 

src/api/subs/index.ts

@@ -10,7 +10,13 @@ export function useSubsApi() {
     },
     getCollections: () => {
       return request({
-        url: '/api/collections',
+        url: `/api/collections`,
+        method: 'get',
+      });
+    },
+    getOne: (type: string, name: string) => {
+      return request({
+        url: `/api/${type}/${name}`,
         method: 'get',
       });
     },
@@ -20,6 +26,20 @@ export function useSubsApi() {
         method: 'get',
       });
     },
+    createSub: (type: string, data: Sub | Collection) => {
+      return request({
+        url: `/api/${type}`,
+        method: 'post',
+        data,
+      });
+    },
+    editSub: (type: string, name: string, data: Sub | Collection) => {
+      return request({
+        url: `/api/${type}/${name}`,
+        method: 'patch',
+        data,
+      });
+    },
     deleteSub: (type: string, name: string) => {
       return request({
         url: `/api/${type}/${name}`,

src/assets/custom_theme_variables.scss

@@ -1,11 +1,13 @@
 // light mode 颜色变量
 $light-background-color: #f4f4f4;
-$light-nav-bar-color: #f4f4f4;
+$light-nav-bar-color: #f4f4f4bb;
 $light-tab-bar-color: #f4f4f4bb;
 $light-popup-color: #f4f4f4;
 $light-divider-color: #00000006;
 $light-card-color: #fafafa;
 $light-dialog-color: #f8f8f8;
+$light-switch-background-color: #00000012;
+$light-unimportant-icon-color: #00000034;
 
 $light-primary-text-color: #303133;
 $light-second-text-color: #606266;
@@ -14,18 +16,24 @@ $light-lowest-text-color: #c0c4cc;
 
 // dark mode 颜色变量
 $dark-background-color: #121212;
-$dark-nav-bar-color: #121212;
+$dark-nav-bar-color: #12121299;
 $dark-tab-bar-color: #121212aa;
 $dark-popup-color: #121212;
 $dark-divider-color: #ffffff08;
 $dark-card-color: #202020;
 $dark-dialog-color: #202020;
+$dark-switch-background-color: #ffffff14;
+$dark-unimportant-icon-color: #ffffff34;
 
 $dark-primary-text-color: #ffffffee;
 $dark-second-text-color: #ffffffbb;
 $dark-comment-text-color: #ffffff88;
 $dark-lowest-text-color: #ffffff36;
 
+// 全局变量
+$safe-area-side: 16px;
+$item-card-radios: 12px;
+
 // 主题变量名 查看 -> https://nutui.jd.com/theme/#/base
 
 $primary-color: #478ef2;

src/assets/global_overwritten_nutui.scss

@@ -1,39 +1,122 @@
 // 引入定义变量scss文件
 @import 'custom_theme_variables.scss';
 
+// 顶部粘性定位标题样式
+.sticky-title-wrapper {
+  position: sticky;
+  display: block;
+  z-index: 10;
+  top: 0;
+  margin-top: $safe-area-side;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 2;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+
+  .dark-mode & {
+    color: $dark-comment-text-color;
+    background-color: $dark-nav-bar-color;
+  }
+
+  .light-mode & {
+    color: $light-comment-text-color;
+    background-color: $light-nav-bar-color;
+  }
+}
+
 .dark-mode {
   img.auto-reverse {
     filter: brightness(1000%);
   }
+
   .auto-dialog {
     background-color: $dark-dialog-color;
 
     > .nut-dialog {
       > .nut-dialog__content {
         max-height: unset;
       }
+
       > .nut-dialog__header {
         color: $dark-primary-text-color;
         font-weight: bold;
       }
+
       .nut-button--plain {
         background: $dark-dialog-color;
       }
     }
   }
+
+  // 表单 相关
+  .nut-cell-group__warp {
+    background-color: $dark-card-color;
+
+    .nut-form-item,
+    .nut-textarea {
+      background: $dark-card-color;
+
+      .nut-form-item__label {
+        color: $dark-comment-text-color;
+      }
+
+      &::after {
+        border-color: $dark-divider-color;
+      }
+    }
+  }
+
+  .nut-radio__button.false {
+    color: $dark-comment-text-color;
+    background-color: $dark-divider-color;
+    border-color: transparent;
+  }
+
+  .nut-radio__icon--unchecked {
+    color: $dark-lowest-text-color;
+  }
+
+  .nut-radio__label {
+    color: $dark-second-text-color;
+  }
+
+  .nut-input-text {
+    color: $dark-second-text-color !important;
+  }
+
+  :-moz-placeholder {
+    color: $dark-lowest-text-color;
+  }
+
+  ::-moz-placeholder {
+    color: $dark-lowest-text-color;
+  }
+
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: $dark-lowest-text-color;
+  }
+
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder {
+    color: $dark-lowest-text-color;
+  }
 }
 
 .light-mode {
   img.auto-reverse {
     filter: brightness(0);
   }
+
   .auto-dialog {
     background-color: $light-dialog-color;
 
     > .nut-dialog {
       > .nut-dialog__content {
         max-height: unset;
       }
+
       > .nut-dialog__header {
         color: $light-primary-text-color;
         font-weight: bold;
@@ -44,4 +127,58 @@
       }
     }
   }
+
+  // 表单相关
+  .nut-cell-group__warp {
+    background-color: $light-card-color;
+
+    .nut-form-item,
+    .nut-textarea {
+      background: $light-card-color;
+
+      .nut-form-item__label {
+        color: $light-comment-text-color;
+      }
+
+      &::after {
+        border-color: $light-divider-color;
+      }
+    }
+  }
+
+  .nut-radio__button.false {
+    color: $light-comment-text-color;
+    background-color: $light-divider-color;
+  }
+
+  .nut-radio__icon--unchecked {
+    color: $light-lowest-text-color;
+  }
+
+  .nut-radio__label {
+    color: $light-second-text-color;
+  }
+
+  // input 相关
+  .nut-input-text {
+    color: $light-second-text-color !important;
+  }
+
+  :-moz-placeholder {
+    color: $light-lowest-text-color;
+  }
+
+  ::-moz-placeholder {
+    color: $light-lowest-text-color;
+  }
+
+  input:-ms-input-placeholder,
+  textarea:-ms-input-placeholder {
+    color: $light-lowest-text-color;
+  }
+
+  input::-webkit-input-placeholder,
+  textarea::-webkit-input-placeholder {
+    color: $light-lowest-text-color;
+  }
 }

src/components/NavBar.vue

@@ -94,8 +94,8 @@
         height: v-bind(navBarHeight);
         top: 0;
         box-shadow: none;
-        backdrop-filter: blur(2px);
-        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(16px);
+        -webkit-backdrop-filter: blur(16px);
 
         .dark-mode & {
           background: $dark-nav-bar-color;

src/components/SubListItem.vue

@@ -15,7 +15,9 @@
       </div>
       <div class="sub-item-content">
         <div class="sub-item-title-wrapper">
-          <h3 class="sub-item-title">{{ displayName }}</h3>
+          <h3 class="sub-item-title">
+            {{ displayName || name }}
+          </h3>
           <button class="copy-sub-link" @click="onClickCopyLink">
             <font-awesome-icon icon="fa-solid fa-clone"></font-awesome-icon>
           </button>
@@ -87,6 +89,7 @@
   import { useGlobalStore } from '@/store/global'
   import { getString } from '@/utils/flowTransfer'
   import { useI18n } from 'vue-i18n'
+
   const { toClipboard } = useClipboard()
   const { t } = useI18n()
 
@@ -186,7 +189,7 @@
   }
 
   const onClickEdit = () => {
-    router.push(`/edit/${props.type}/${name}`)
+    router.push(`/edit/${props.type}s/${name}`)
   }
 
   const onClickDelete = () => {
@@ -256,8 +259,8 @@
     width: calc(100% - 24px);
     margin-left: auto;
     margin-right: auto;
-    border-radius: 12px;
-    padding: 16px;
+    border-radius: $item-card-radios;
+    padding: $safe-area-side;
     display: flex;
 
     .dark-mode & {