新增：css样式支持

src/views/cms/navigation/components/navigation-edit.vue

@@ -22,6 +22,7 @@
         <a-col
           v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
         >
+          {{ form.parentId }}
           <a-form-item label="上级分类" name="parentId">
             <a-tree-select
               allow-clear
@@ -44,6 +45,7 @@
           <a-form-item
             :label="form.type == 9 ? '链接地址' : '路由地址'"
             name="path"
+            v-if="isUpdate"
           >
             <a-input
               allow-clear
@@ -54,11 +56,20 @@
               @pressEnter="save"
             />
           </a-form-item>
-          <a-form-item label="组件路径" name="component">
+          <a-form-item label="组件路径" name="component" v-if="isUpdate">
             <a-input
               allow-clear
-              placeholder="/pages/[custom].vue"
+              placeholder="/pages/product/detail.vue"
               v-model:value="form.component"
+              disabled
+              @pressEnter="save"
+            />
+          </a-form-item>
+          <a-form-item label="css样式" name="style" v-if="isUpdate">
+            <a-input
+              allow-clear
+              placeholder="Tailwind CSS风格"
+              v-model:value="form.style"
               @pressEnter="save"
             />
           </a-form-item>
@@ -82,40 +93,13 @@
               @done="chooseModel"
             />
           </a-form-item>
-          <a-form-item label="位置" name="top">
+          <a-form-item label="位置" name="top" v-if="isUpdate">
             <a-radio-group v-model:value="form.position" @change="onPosition">
               <a-radio :value="1">顶部</a-radio>
               <a-radio :value="2">底部</a-radio>
               <a-radio :value="0">不限</a-radio>
             </a-radio-group>
           </a-form-item>
-          <a-form-item label="权限" name="">
-            <a-radio-group v-model:value="form.permission">
-              <a-radio :value="0">所有人</a-radio>
-              <a-radio :value="1">登录可见</a-radio>
-              <a-radio :value="2">密码可见</a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item label="允许评论" name="">
-            <a-space>
-              <a-switch
-                checked-children="是"
-                un-checked-children="否"
-                :checked="form.hide === 0"
-                @update:checked="updateHideValue"
-              />
-            </a-space>
-          </a-form-item>
-          <a-form-item label="状态" name="hide">
-            <a-space>
-              <a-switch
-                checked-children="显示"
-                un-checked-children="隐藏"
-                :checked="form.hide === 0"
-                @update:checked="updateHideValue"
-              />
-            </a-space>
-          </a-form-item>
           <a-form-item label="排序" name="sortNumber">
             <a-input-number
               :min="0"
@@ -136,6 +120,31 @@
               @del="onDeleteItem"
             />
           </a-form-item>
+          <a-divider style="margin-bottom: 16px" />
+          <a-form-item label="状态" name="hide">
+            <a-space>
+              <a-switch
+                checked-children="显示"
+                un-checked-children="隐藏"
+                :checked="form.hide === 0"
+                @update:checked="updateHideValue"
+              />
+            </a-space>
+          </a-form-item>
+          <a-form-item label="权限" name="permission" v-if="isUpdate">
+            <a-radio-group v-model:value="form.permission">
+              <a-radio :value="0">所有人</a-radio>
+              <a-radio :value="1">登录可见</a-radio>
+              <a-radio :value="2">密码可见</a-radio>
+            </a-radio-group>
+          </a-form-item>
+          <a-form-item
+            label="访问密码"
+            name="password"
+            v-if="form.permission == 2"
+          >
+            <a-tag>{{ form.password }}</a-tag>
+          </a-form-item>
         </a-col>
       </a-row>
     </a-form>
@@ -154,7 +163,6 @@
   import { removeSiteInfoCache } from '@/api/cms/website';
   import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
   import { FileRecord } from '@/api/system/file/model';
-  import { uuid } from 'ele-admin-pro';
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -190,9 +198,9 @@
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Navigation>({
     navigationId: undefined,
-    model: '[custom]',
+    model: 'custom',
     code: undefined,
-    modelName: '',
+    modelName: '通用模型',
     type: 0,
     title: '',
     parentId: 0,
@@ -200,10 +208,11 @@
     parentPath: undefined,
     path: undefined,
     component: undefined,
+    componentPath: '/pages/[custom].vue',
     sortNumber: 100,
     hide: 0,
     permission: 0,
-    password: uuid(),
+    password: undefined,
     position: 1,
     top: 0,
     bottom: 1,
@@ -304,9 +313,10 @@
   });
 
   const chooseModel = (item: Navigation) => {
+    console.log(item);
     form.model = `${item.value}`;
     form.modelName = `${item.label}`;
-    form.component = `/pages/${item.value}`;
+    form.componentPath = `${item.component}`;
   };
 
   const chooseFile = (data: FileRecord) => {
@@ -379,10 +389,12 @@
     (visible) => {
       if (visible) {
         form.position = props.position;
+        if (props.parentId) {
+          form.parentId = props.parentId;
+        }
         if (props.data) {
           assignFields({
             ...props.data,
-            parentId: props.data.parentId ? props.data.parentId : 0,
             tempPath: props.data.path
           });
           if (props.data.type == 2) {